Changing a range sliders min/max attributes and redraw dynamically

Question

I want to create three range sliders with the HTML5 input type range. These sliders will we depended on each other, so that if I change the value of one it may change the min and/or max attribute(s) of another.

Lets say I have this data:

$scope.test = {
        slide1 : {
            min : 0,
            max : 100,
            step : 1,
            value : 50
        },
        slide2 : {
            min : 0,
            step : 1,
            value : 0
        },
        slide3 : {
            step : 1,
            value : 0
        }
    }

This should be represented on the view like this:

<div ng-controller="testCtrl">
    <input id="slide1" type="range" min={{test.slide1.min}} max={{test.slide1.max}} step={{test.slide1.step}} ng-model="test.slide1.value" value={{test.slide1.value}}>
    <input id="slide2" type="range" min={{test.slide2.min}} max={{test.slide1.value}} step={{test.slide2.step}} ng-model="test.slide2.value" value={{test.slide2.value}}>
    <input id="slide3" type="range" min={{test.slide2.value}} max={{test.slide1.value}} step={{test.slide3.step}} ng-model="test.slide3.value" value={{test.slide3.value}}>
</div>

So the first slide has a fixed min and max.

The 2nd one has a fixed min, but its max depends on the value from slider1.

Slider3 can only be altered between the value of slide2 and the value of slide1.

Well, if I change the sliders all of the attributes are changed and set to the correct value.

BUT: What not will happen is that the slider is also redrawn correctly. That only works if I go and change the value of slide2 and slide3. Set slide3 to any value and then change slide2. If you do so you'll see that slide3 is redrawn correctly so the thumb changes it position relative to the current value and given range. But changing slide1 does not show such effect. You will only see the changes when you start to change the value of slide2/3...

Is it possible to force the redraw of the range input element when the min/max attributes are changed on runtime?

Here is an example plunker: http://plnkr.co/edit/UWChUywSpy64uvNbCHE0?p=preview

better create a jsfiddle/plunk with what you have done.

Rabi
– Rabi

2014-11-10 07:42:07 +00:00
Commented Nov 10, 2014 at 7:42 — Rabi
– Rabi, Commented Nov 10, 2014 at 7:42

John Weidner · Accepted Answer · 2015-01-24 15:00:45Z

0

I handled this by replacing that part of the dom with a new input range element with the desired values. You can check it out at https://userbob.com/threeSliders.jsp The max value of the bottom two sliders is dependent on the value selected on the top slider.

edited Jan 24, 2015 at 15:00

answered Jan 9, 2015 at 4:58

John Weidner

2,2053 gold badges20 silver badges32 bronze badges

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

Collectives™ on Stack Overflow

Changing a range sliders min/max attributes and redraw dynamically

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related