I have a Range Slider, and i want to change it’s data-max
after the page is initiated.
The problem is when i change the data-max
like this:
$$('#price-filter').attr("data-max", 500);
The Range Slider doesn’t use the newest data-max
, obviously because it depends on Javascript
code that already had the initial data-max
.
So how can i make Range Slider to work with the updated data-max
?
you can use Js to change max or min value
var _r = app.range.get('.range-slider')
var max = Math.floor(Math.random() * 100) + 100;
_r.max = max
full code:
Thanks, that was helpful
i have another question if you don’t mind:
i want to change the data-value-right
and data-value-left
too, because i want to display the time instead of a number.
I want to do something like Youtube video seek Bar, so i want to display in the bubble that shows when you move the Range Slider a time like this:
$$('#videoRangeSlider').on('range:change', function (e, range) {
var rangLeft = formatTime(range.value[0]); // ex: rangLeft = '03:44'
var rangRight = formatTime(range.value[1]);
$$('#valueLow').text(rangLeft); // i want to show this value in the 'range-knob-label' too
$$('#valueHigh').text(rangRight); // the same here
});
For data-value-left/right you can do as you did with max.
_r.setValue([10,90])
For de bubble you can look at the example in F7 Doc;
https://framework7.io/docs/range-slider.html#examples
Look at Brightness if you slide the circle, its display a small label with the current value.
PS:
i updated the jsfiddle of my previous post with the new setValue
It didn’t work the way i wanted it to be. i guess i didn’t explain what i want . i edited your jsfiddle, you will understand what i’m looking for right now (my second question , because it’s different from my first question )
jsfiddle : you can notice that i display the same value in the in both $$('#valueLow')
and rangeSlider.setValue([startTime,endTime])
, but the time doesn’t show up in the bubble
something like this:
maybe there is a built-in method, instead of forcing the new value to the labels.
That was exactly what i was looking for, thank you so much