I need to set the values of the slider when it is created, how can I do it? Example:
<div class="slider" data-min-value="0" data-max-value="120"><input type="range"></div>
$('.slider').slider({
range: true,
create: function(event, ui) {
console.log($(this).data('minValue'));
ui.values[0] = $(this).data('minValue');
ui.values[1] = $(this).data('maxValue');
},
})
But ui is empty.
The ui.values array is just an argument, changing it doesn't change the settings of the slider.
You change the settings like this
$('.slider').slider({
range: true,
create: function (event, ui) {
$(this).slider( "option", "max", $(this).data('maxValue') );
$(this).slider( "option", "min", $(this).data('minValue') );
}
});
Note that you'd usually just do this on instantiation
$('.slider').each(function() {
$(this).slider({
max: $(this).data('maxValue'),
min: $(this).data('minValue')
});
});
For data attributes accessed using the .data() method, do not use camelCase:
ui.values[0] = $(this).data('min-value');
ui.values[1] = $(this).data('max-value');
Only use camelCase when you're using the native .dataset object, i.e.:
ui.values[0] = $(this)[0].dataset.minValue;
ui.values[1] = $(this)[0].dataset.maxValue;
rangeinput inside a jQuery UI slider ?