You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
221 lines
4.8 KiB
221 lines
4.8 KiB
'use strict'; |
|
$(document).ready(function() { |
|
// range slider |
|
|
|
$('#ex1').slider({ |
|
formatter: function(value) { |
|
return 'Current value: ' + value; |
|
} |
|
}); |
|
|
|
// With JQuery |
|
$("#ex2").slider({}); |
|
|
|
|
|
|
|
//#ex3 |
|
var RGBChange = function() { |
|
$('#RGB').css('background', 'rgb(' + r.getValue() + ',' + g.getValue() + ',' + b.getValue() + ')') |
|
}; |
|
|
|
var r = $('#R').slider() |
|
.on('slide', RGBChange) |
|
.data('slider'); |
|
var g = $('#G').slider() |
|
.on('slide', RGBChange) |
|
.data('slider'); |
|
var b = $('#B').slider() |
|
.on('slide', RGBChange) |
|
.data('slider'); |
|
|
|
|
|
//#ex4 |
|
$("#ex4").slider({ |
|
reversed: true |
|
}); |
|
|
|
//#ex5 |
|
|
|
var slider = new Slider('#ex5'); |
|
|
|
var toggleBtn = document.querySelector('button[data-behaviour="toggle"]#destroyEx5Slider '); |
|
toggleBtn.addEventListener('click', function (e) { |
|
var container = e.target.previousElementSibling; |
|
if (container.style.cssText.match(/display[\s:]{1,3}none/)) { |
|
container.style.cssText = ''; |
|
} else { |
|
container.style.cssText = 'display: none;'; |
|
} |
|
}, false); |
|
|
|
//#ex6 |
|
$("#ex6").slider(); |
|
$("#ex6").on("slide", function(slideEvt) { |
|
$("#ex6SliderVal").text(slideEvt.value); |
|
}); |
|
|
|
|
|
//#ex7 |
|
$("#ex7-enabled").on('click',function() { |
|
if (this.checked) { |
|
// With JQuery |
|
$("#ex7").slider("enable"); |
|
|
|
// Without JQuery |
|
slider.enable(); |
|
} else { |
|
// With JQuery |
|
$("#ex7").slider("disable"); |
|
|
|
// Without JQuery |
|
slider.disable(); |
|
} |
|
}); |
|
|
|
|
|
|
|
|
|
//#8 |
|
var slider = new Slider("#ex8", { |
|
tooltip: 'always' |
|
}); |
|
|
|
//#9 |
|
var slider = new Slider("#ex9", { |
|
precision: 2, |
|
value: 8.115 // Slider will instantiate showing 8.12 due to specified precision |
|
}); |
|
|
|
//#10 |
|
var slider = new Slider("#ex10", {}); |
|
|
|
//#11 |
|
var slider = new Slider("#ex11", { |
|
step: 20000, |
|
min: 0, |
|
max: 200000, |
|
tooltip: 'always' |
|
}); |
|
|
|
//#12 |
|
$("#ex12a").slider({ id: "slider12a", min: 0, max: 10, value: 5 }); |
|
$("#ex12b").slider({ id: "slider12b", min: 0, max: 10, range: true, value: [3, 7] }); |
|
$("#ex12c").slider({ id: "slider12c", min: 0, max: 10, range: true, value: [3, 7] }); |
|
|
|
//#13 |
|
$("#ex13").slider({ |
|
ticks: [0, 100, 200, 300, 400], |
|
ticks_labels: ['$0', '$100', '$200', '$300', '$400'], |
|
ticks_snap_bounds: 30 |
|
}); |
|
|
|
|
|
//#14 |
|
$("#ex14").slider({ |
|
ticks: [0, 100, 200, 300, 400], |
|
ticks_positions: [0, 15, 35, 60, 90, 100], |
|
ticks_labels: ['$0', '$100', '$200', '$300', '$400'], |
|
ticks_snap_bounds: 30 |
|
}); |
|
|
|
// #15 |
|
$("#ex15").slider({ |
|
min: 1000, |
|
max: 10000000, |
|
scale: 'logarithmic', |
|
step: 10 |
|
}); |
|
|
|
|
|
//#16 |
|
$("#ex16a").slider({ min: 0, max: 10, value: 0, focus: true }); |
|
$("#ex16b").slider({ min: 0, max: 10, value: [0, 10], focus: true }); |
|
|
|
|
|
// #ex17 |
|
$("#ex17a").slider({ |
|
min: 0, |
|
max: 10, |
|
value: 0, |
|
tooltip_position: 'bottom' |
|
}); |
|
$("#ex17b").slider({ |
|
min: 0, |
|
max: 10, |
|
value: 0, |
|
orientation: 'vertical', |
|
tooltip_position: 'left' |
|
}); |
|
|
|
|
|
|
|
// #ex18 |
|
$("#ex18a").slider({ |
|
min: 0, |
|
max: 10, |
|
value: 5, |
|
labelledby: 'ex18-label-1' |
|
}); |
|
$("#ex18b").slider({ |
|
min: 0, |
|
max: 10, |
|
value: [3, 6], |
|
labelledby: ['ex18-label-2a', 'ex18-label-2b'] |
|
}); |
|
|
|
//#ex19 no script |
|
|
|
//#ex20 |
|
$('#ex20a').on('click', function(e) { |
|
$('#ex20a') |
|
.parent() |
|
.find(' >.show-well') |
|
.toggle() |
|
.find('input') |
|
.slider('relayout'); |
|
e.preventDefault(); |
|
}); |
|
|
|
//#21 no script |
|
|
|
//#22 |
|
// With JQuery |
|
$('#ex22').slider({ |
|
id: 'slider22', |
|
min: 0, |
|
max: 20, |
|
step: 1, |
|
value: 14, |
|
rangeHighlights: [{ "start": 2, "end": 5 }, |
|
{ "start": 7, "end": 8 }, |
|
{ "start": 17, "end": 19 }, |
|
{ "start": 17, "end": 24 }, |
|
{ "start": -3, "end": 19 } |
|
] |
|
}); |
|
|
|
|
|
//#23 |
|
|
|
$("#ex23").slider({ |
|
ticks: [0, 1, 2, 3, 4], |
|
ticks_positions: [0, 30, 60, 70, 90, 100], |
|
ticks_snap_bounds: 200, |
|
formatter: function(value) { |
|
return 'Current value: ' + value; |
|
}, |
|
ticks_tooltip: true, |
|
step: 0.01 |
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//#7 |
|
var slider = new Slider("#ex7"); |
|
|
|
|
|
});
|
|
|