jQuery ui slider and input text box – two way binding

jQuery ui can be used to create a slider with updated value getting displayed in an input text box and any update in text box will change slider.

Syntax:

<div id="slider"></div>
 
<script>
  $("#slider").slider();
</script>

Example – slider and input text box – two way binding

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<div id="slider"></div><br/>
<input id="slidervalue" type="text"> (min: 10, max: 90)

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript">
$(function () {
  $("#slider").slider({
    min: 10, max: 90, step: 1, value: 10,
    slide: function( event, ui ) {
      $("#slidervalue").val(ui.value);
    }
  });
  var initialValue = $("#slider").slider("option", "value");
  $("#slidervalue").val(initialValue);
  $("#slidervalue").change(function() {
    var oldVal = $("#slider").slider("option", "value");
    var newVal = $(this).val();
    if (isNaN(newVal) || newVal < 10 || newVal > 100) {
      $("#slidervalue").val(oldVal);
    } else {
      $("#slider").slider("option", "value", newVal);
    }
  });
});
</script>
refresh
Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit

Comments

Click here to write/view comments