CODEWITHSUNDEEP
javascriptjquery
avtandil medzmariashvili
avtandil medzmariashvili

Reputation: 13

How to change jquery slider values using js

I have several sliders with "from" and "to" values. Each slider's "from" value is based on previous slider's "to" value. My sliders have a problem. When I slide the "to" value, "from" value jumps to the start, at 0. I'm trying to fix it like this:

$("#slider-range-two").slider({
        range: true,
        min: 0,
        max: 1000,
        step: 1,
        values: [0, 1000],
        slide: function (event, ui) {
            $('#slider-range-two').slider('option', 'values', '[' + leftValue +', 1000]');
        }
    });

I want to change slider's values while user drags, but this does not work. How can I fix that?

Upvotes: 1

Views: 63

Answers (1)

Jay
Jay

Reputation: 348

As per my understanding out of your question, provided below snippet with solution. Let me correct, if your requirement is different, so I can provide necessary solution.

var handleOne = $( "#custom-handle1" );
var handleTwo = $( "#custom-handle2" );
var handleThree = $( "#custom-handle3" );

handleOne.slider({
  range: true,
  min: 0,
  max: 1000,
  step: 1,
  values: [20, 300],
  slide: function(event, ui) {
    handleTwo.slider('values', 0, ui.values[ 1 ]);
  }
});

handleTwo.slider({
  range: true,
  min: 0,
  max: 1000,
  step: 1,
  values: [0, 1000],
  slide: function(event, ui) {
    handleThree.slider('values', 0, ui.values[ 1 ]);
  }
});

handleThree.slider({
  range: true,
  min: 0,
  max: 1000,
  step: 1,
  values: [0, 1000]
});
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<p> First Slider </p>
<div id="slider-range-one">
  <div id="custom-handle1" class="ui-slider-handle"></div>
</div>
 
 <p> Second Slider </p>
 <div id="slider-range-two">
  <div id="custom-handle2" class="ui-slider-handle"></div>
</div>

<p> Third Slider </p>
 <div id="slider-range-three">
  <div id="custom-handle3" class="ui-slider-handle"></div>
</div>

Upvotes: 1

Related Questions