XH_Digital_Management/static/js/pages/ac-rangeslider.js

211 lines
4.2 KiB
JavaScript

'use strict';
// [ basic-Slider ]
(function () {
var slider = new Slider('#ex1', {
formatter: function (value) {
return 'Current value: ' + value;
}
});
// [ Selector-Slider ]
var slider_select = new Slider('#ex2', {});
var RGBChange = function () {
document.querySelector('#RGB').style.background = 'rgb(' + r.getValue() + ',' + g.getValue() + ',' + b.getValue() + ')';
};
var r = new Slider('#R', {
reversed: true
}).on('slide', RGBChange);
var g = new Slider('#G', {
reversed: true
}).on('slide', RGBChange);
var b = new Slider('#B', {
reversed: true
}).on('slide', RGBChange);
// [ vertical-slider ]
var slider = new Slider('#ex4', {
reversed: true
});
// [ Destroy-Slider ]
var slider_destroy = new Slider('#ex5');
document.querySelector('#destroyEx5Slider').addEventListener('click', function () {
slider_destroy.destroy();
});
// [ current-Slider ]
var slider = new Slider('#ex6');
slider.on('slide', function (sliderValue) {
document.getElementById('ex6SliderVal').textContent = sliderValue;
});
// [ Enable-Slider ]
var slider_enable = new Slider('#ex7');
document.querySelector('#ex7-enabled').addEventListener('click', function () {
if (this.checked) {
slider_enable.enable();
} else {
slider_enable.disable();
}
});
// [ Tooltip-Slider ]
var slider = new Slider('#ex8', {
tooltip: 'always'
});
// [ Precision-slider ]
var slider_precision = new Slider('#ex9', {
precision: 2,
value: 8.115
});
// [ handlers-slider ]
var slider = new Slider('#ex10', {});
// [ step-slider ]
var slider = new Slider('#ex11', {
step: 20000,
min: 0,
max: 200000
});
//[ low & high-slider ]
var sliderA = new Slider('#ex12a', {
id: 'slider12a',
min: 0,
max: 10,
value: 5
});
var sliderB = new Slider('#ex12b', {
id: 'slider12b',
min: 0,
max: 10,
range: true,
value: [3, 7]
});
var sliderC = new Slider('#ex12c', {
id: 'slider12c',
min: 0,
max: 10,
range: true,
value: [3, 7]
});
// [ labels-slider ]
var slider = new Slider('#ex13', {
ticks: [0, 10, 20, 30, 40],
ticks_labels: ['$0', '$10', '$20', '$30', '$40'],
ticks_snap_bounds: 95
});
// [ positions-slider ]
var slider = new Slider('#ex14', {
ticks: [0, 10, 20, 30, 40],
ticks_positions: [0, 30, 60, 80, 100],
ticks_labels: ['$0', '$10', '$20', '$30', '$40'],
ticks_snap_bounds: 95
});
// [ logarithmic-slider ]
var slider = new Slider('#ex15', {
min: 1000,
max: 10000000,
scale: 'logarithmic',
step: 10
});
// [ Focus-slider ]
var sliderA = new Slider('#ex16a', {
min: 0,
max: 10,
value: 0,
focus: true
});
var sliderB = new Slider('#ex16b', {
min: 0,
max: 10,
value: [0, 10],
focus: true
});
// [ Unusual-slider ]
var sliderA = new Slider('#ex17a', {
min: 0,
max: 10,
value: 0,
tooltip_position: 'bottom'
});
var sliderB = new Slider('#ex17b', {
min: 0,
max: 10,
value: 0,
orientation: 'vertical',
tooltip_position: 'left'
});
// [ Accessibility-slider ]
var sliderA = new Slider('#ex18a', {
min: 0,
max: 10,
value: 5,
labelledby: 'ex18-label-1'
});
var sliderB = new Slider('#ex18b', {
min: 0,
max: 10,
value: [3, 6],
labelledby: ['ex18-label-2a', 'ex18-label-2b']
});
// [ Highlight-slider ]
var slider = new Slider('#ex22', {
id: 'slider22',
min: 0,
max: 20,
step: 1,
value: 14,
rangeHighlights: [
{
start: 2,
end: 5,
class: 'category1'
},
{
start: 7,
end: 8,
class: 'category2'
},
{
start: 17,
end: 19
},
{
start: 17,
end: 24
},
{
start: -3,
end: 19
}
]
});
// [ Tick-slider ]
var slider = new Slider('#ex23', {
ticks: [0, 1, 2, 3, 4],
ticks_positions: [0, 30, 70, 90, 100],
ticks_snap_bounds: 200,
formatter: function (value) {
return 'Current value: ' + value;
},
ticks_tooltip: true,
step: 0.01
});
// [ auto-slider ]
var slider = new Slider('#ex24');
})();