title: Convert jQuery UI slider widget to AngularJS directive
body: <p>I'm trying to build an Angular directive that creates a keyboard-accessible slider widget. I found several Angular sliders on Github, but none of them are keyboard-accessible. So, I'm trying to convert the jQuery UI slider to an Angular directive.</p>
  
  <p>Here is how I'd build the widget without Angular.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="slider"&gt;&lt;/slider&gt;
  &lt;input type="text" id="amount"/&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>$("#slider").slider({
    min: 1,
    max: 10,
    slide: function(event, ui) {
      $("#amount").val(ui.value);
    }
  });
  </code></pre>
  
  <p>And this is how I'd like the Angular directive to work:</p>
  
  <pre><code>&lt;slider min="1" max="10" ng-model="sliderValue"/&gt;
  &lt;input type="text" ng-model="sliderValue"/&gt;
  </code></pre>
  
  <p>As an example, here is a jsFiddle that shows how someone converted a jQuery UI date widget to an Angular directive.</p>
  
  <p><a href="http://jsfiddle.net/xB6c2/121/" rel="nofollow">http://jsfiddle.net/xB6c2/121/</a></p>
  
  <p>I'd like to do something similar to this for the slider widget. Thanks!</p>