1. Basic
$('#demo1').XSlider({
min:0,
max:10,
value:5
});
// or
new XSlider({
el: '#demo1-1a',
min:0,
max:10,
value:5
});
2. Vertical
|
$('#demo2').XSlider({
min:0,
max:10,
value:5,
direction: 'vertical', //horizontal|vertical
});
|
3. Step Size
$('#demo3').XSlider({
min:0,
max:10,
value:5,
step:0.5,
onChange(val){
console.log(val);
}
});
4. Tooltip
$('#demo4').XSlider({
min:0,
max:10,
value:5,
tooltip: true,
tooltipOffset: 15,
tooltipDirection: 'bottom',
tooltipFormat: function(val){
return 'Val: <span style="color:red">' + val + '</span>';
}
});
5. Custom slider handle
$('#demo5-1').XSlider({
min: 1,
max: 3,
value: 1,
handleAutoSize: true,
autoScroll: true,
autoScrollDelayTime: 800,
});
$('#demo5-2').XSlider({
min: 1,
max: 3,
value: 1,
handleAutoSize: false,
autoScroll: false,
});
6. Custom Styles
$('#demo6-1').XSlider({
min: 1,
max: 3,
value: 1,
className: 'mobile',
handleAutoSize: true
});
$('#demo6-2').XSlider({
min: 1,
max: 3,
value: 1,
className: 'mobile',
handleAutoSize: false
});
7. Set/Get Value
let slider7 = $('#demo7').XSlider({
min: 1,
max: 3,
value: 1,
className: 'mobile',
handleAutoSize: false
});
slider7.setOptions({value: 2});
slider7.setOptions({handleAutoSize: true});
slider7.getValue();