How to change jquery slider values using js

Question

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?

I don't quite understand what you're trying to achieve. It sounds like you want to change the value as someone drags - which would make it almost impossible to use the slider control — Rory McCrossan
– Rory McCrossan, Commented Jun 1, 2018 at 11:04
@RoryMcCrossan I'm trying to keep "from" value fixed, because when user starts dragging, it jumps to the 0 value because of slider's values option — avtandil medzmariashvili
– avtandil medzmariashvili, Commented Jun 1, 2018 at 11:06
So you don't want the user to be able to reduce the value (ie. slide left)? Is that correct — Rory McCrossan
– Rory McCrossan, Commented Jun 1, 2018 at 11:08
@RoryMcCrossan I just need to find out how to change slider's options and set new values using js. I have included the code how i'm trying to achieve this, but it does not work. — avtandil medzmariashvili
– avtandil medzmariashvili, Commented Jun 1, 2018 at 11:10
How about clarifying how things work now using a minimal reproducible example.... — yezzz
– yezzz, Commented Jun 1, 2018 at 11:15

Jay · Accepted Answer · 2018-06-01 11:38:10Z

1

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>

answered Jun 1, 2018 at 11:38

Jay

3481 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

avtandil medzmariashvili Over a year ago

Thank you so much! That's exactly what I needed.

Collectives™ on Stack Overflow

How to change jquery slider values using js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related