[SOLVED] How to change Range Slider data-max after tabInit?


#1

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?


#2

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:

jsfiddle


#4

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 
});

#5

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


#6

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


#7

something like this:

jsfiddle

maybe there is a built-in method, instead of forcing the new value to the labels.


#8

That was exactly what i was looking for, thank you so much