Values of slider from jquery

user_13518126 0
Viewed 59

I want to take value from input field to make changes to the slider.

    <div id="gobutton">
        <div class="ui search input">
            <input type="text" id="start">
            <input type="text" id="maxend>
        </div>
        <div class="ui btn-container">
            <div id="range-slider"></div>
            <a class="item" href="">Go</a>
        </div>
    </div>


$(function() {
  $("#slider-3").slider({
    range: true,
    min: 0,
    max: 500,
    values: [35, 200],
    slide: function(event, ui) {
      $("#price").val("$" + ui.values[0] + " - $" + ui.values[1]);
      $('#gobutton a').prop('href', '?start=' + ui.values[0] + "&end=" + ui.values[1];
    }
  });
  $("#price").val("$" + $("#slider-3").slider("values", 0) +
    " - $" + $("#slider-3").slider("values", 1));
});
<title>jQuery UI Slider functionality</title>
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<!-- HTML -->
<p>
  <label for="price">Price range:</label>
  <input type="text" id="price" style="border:0; color:#b9cd6d; font-weight:bold;">
</p>
<div id="slider-3"></div>

As in this the value only changes when I slide the slider. How can I change the value of slider by typing in the text field.

Also the link (#gobutton) should also work.

Source: http://tutorialspoint.com/jqueryui/jqueryui_slider.htm

jquery
1 Answers

You can $("#slider-3").slider("values", [$("#start").val(), $("#end").val()]); get and set values with $("#slider-3").slider("values") & $("#slider-3").slider("values", [$("#start").val(), $("#end").val()]);.

As you have mentioned that you want to change slider on change of input, so in example I've taken two inputs start & end. Bind change event on these inputs and updated slider.

slider has values as array, thus we need to provide array of values to update it. Use [$("#start").val(), $("#end").val()] as start and end value array.

Use $("#slider-3").data("ui-slider")._slide(); which will trigger slide event so price can also update.

Check below code.

$(function() {
  $("#slider-3").slider({
    range: true,
    min: 0,
    max: 500,
    values: [35, 200],
    slide: function(event, ui) {
      $("#price").val("$" + ui.values[0] + " - $" + ui.values[1]);
      $('#gobutton a').prop('href', '?start=' + ui.values[0] + "&end=" + ui.values[1]);
    }
  });
  $("#price").val("$" + $("#slider-3").slider("values", 0) +
    " - $" + $("#slider-3").slider("values", 1));
});

$("#start, #maxend").change(function() {
  $("#slider-3").slider("values", [$("#start").val(), $("#maxend").val()]);
  // below line will trigger slide event so price can also update.
  // $("#slider-3").data("slider")._slide(); // for old versions
  $("#slider-3").data("ui-slider")._slide(); // for new versions
});
<title>jQuery UI Slider functionality</title>
<link href="https://code.jquery.com/ui/1.12.1/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.12.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<p>
  <label for="price">Price range:</label>
  <input type="text" id="price" style="border:0; color:#b9cd6d; font-weight:bold;">
</p>
<div id="slider-3"></div>

<div>
  <div id="gobutton">
    <div class="ui search input">
      <input type="text" id="start" value="35" />
      <input type="text" id="maxend" value="200" />
    </div>
    <div class=" ui btn-container ">
      <div id="range-slider "></div>
      <a class="item " href=" ">Go</a>
    </div>
  </div>

user_96952860
Related