// Class definition
var KTnoUiSliderDemos = function() {
// Private functions
var demo1 = function() {
// init slider
var slider = document.getElementById('kt_nouislider_1');
noUiSlider.create(slider, {
start: [ 0 ],
step: 2,
range: {
'min': [ 0 ],
'max': [ 10 ]
},
format: wNumb({
decimals: 0
})
});
// init slider input
var sliderInput = document.getElementById('kt_nouislider_1_input');
slider.noUiSlider.on('update', function( values, handle ) {
sliderInput.value = values[handle];
});
sliderInput.addEventListener('change', function(){
slider.noUiSlider.set(this.value);
});
}
var demo2 = function() {
// init slider
var slider = document.getElementById('kt_nouislider_2');
noUiSlider.create(slider, {
start: [ 20000 ],
connect: [true, false],
step: 1000,
range: {
'min': [ 20000 ],
'max': [ 80000 ]
},
format: wNumb({
decimals: 3,
thousand: '.',
postfix: ' (US $)',
})
});
// init slider input
var sliderInput = document.getElementById('kt_nouislider_2_input');
slider.noUiSlider.on('update', function( values, handle ) {
sliderInput.value = values[handle];
});
sliderInput.addEventListener('change', function(){
slider.noUiSlider.set(this.value);
});
}
var demo3 = function() {
// init slider
var slider = document.getElementById('kt_nouislider_3');
noUiSlider.create(slider, {
start: [20, 80],
connect: true,
direction: 'rtl',
tooltips: [true, wNumb({ decimals: 1 })],
range: {
'min': [0],
'10%': [10, 10],
'50%': [80, 50],
'80%': 150,
'max': 200
}
});
// init slider input
var sliderInput0 = document.getElementById('kt_nouislider_3_input');
var sliderInput1 = document.getElementById('kt_nouislider_3.1_input');
var sliderInputs = [sliderInput1, sliderInput0];
slider.noUiSlider.on('update', function( values, handle ) {
sliderInputs[handle].value = values[handle];
});
}
var demo4 = function() {
var slider = document.getElementById('kt_nouislider_input_select');
// Append the option elements
for ( var i = -20; i <= 40; i++ ){
var option = document.createElement('option');
option.text = i;
option.value = i;
slider.appendChild(option);
}
// init slider
var html5Slider = document.getElementById('kt_nouislider_4');
noUiSlider.create(html5Slider, {
start: [ 10, 30 ],
connect: true,
range: {
'min': -20,
'max': 40
}
});
// init slider input
var inputNumber = document.getElementById('kt_nouislider_input_number');
html5Slider.noUiSlider.on('update', function( values, handle ) {
var value = values[handle];
if ( handle ) {
inputNumber.value = value;
} else {
slider.value = Math.round(value);
}
});
slider.addEventListener('change', function(){
html5Slider.noUiSlider.set([this.value, null]);
});
inputNumber.addEventListener('change', function(){
html5Slider.noUiSlider.set([null, this.value]);
});
}
var demo5 = function() {
// init slider
var slider = document.getElementById('kt_nouislider_5');
noUiSlider.create(slider, {
start: 20,
range: {
min: 0,
max: 100
},
pips: {
mode: 'values',
values: [20, 80],
density: 4
}
});
var sliderInput = document.getElementById('kt_nouislider_5_input');
slider.noUiSlider.on('update', function( values, handle ) {
sliderInput.value = values[handle];
});
sliderInput.addEventListener('change', function(){
slider.noUiSlider.set(this.value);
});
slider.noUiSlider.on('change', function ( values, handle ) {
if ( values[handle] < 20 ) {
slider.noUiSlider.set(20);
} else if ( values[handle] > 80 ) {
slider.noUiSlider.set(80);
}
});
}
var demo6 = function() {
// init slider
var verticalSlider = document.getElementById('kt_nouislider_6');
noUiSlider.create(verticalSlider, {
start: 40,
orientation: 'vertical',
range: {
'min': 0,
'max': 100
}
});
// init slider input
var sliderInput = document.getElementById('kt_nouislider_6_input');
verticalSlider.noUiSlider.on('update', function( values, handle ) {
sliderInput.value = values[handle];
});
sliderInput.addEventListener('change', function(){
verticalSlider.noUiSlider.set(this.value);
});
}
// Modal demo
var modaldemo1 = function() {
var slider = document.getElementById('kt_nouislider_modal1');
noUiSlider.create(slider, {
start: [ 0 ],
step: 2,
range: {
'min': [ 0 ],
'max': [ 10 ]
},
format: wNumb({
decimals: 0
})
});
// init slider input
var sliderInput = document.getElementById('kt_nouislider_modal1_input');
slider.noUiSlider.on('update', function( values, handle ) {
sliderInput.value = values[handle];
});
sliderInput.addEventListener('change', function(){
slider.noUiSlider.set(this.value);
});
}
var modaldemo2 = function() {
var slider = document.getElementById('kt_nouislider_modal2');
noUiSlider.create(slider, {
start: [ 20000 ],
connect: [true, false],
step: 1000,
range: {
'min': [ 20000 ],
'max': [ 80000 ]
},
format: wNumb({
decimals: 3,
thousand: '.',
postfix: ' (US $)',
})
});
// init slider input
var sliderInput = document.getElementById('kt_nouislider_modal2_input');
slider.noUiSlider.on('update', function( values, handle ) {
sliderInput.value = values[handle];
});
sliderInput.addEventListener('change', function(){
slider.noUiSlider.set(this.value);
});
}
var modaldemo3 = function() {
var slider = document.getElementById('kt_nouislider_modal3');
noUiSlider.create(slider, {
start: [20, 80],
connect: true,
direction: 'rtl',
tooltips: [true, wNumb({ decimals: 1 })],
range: {
'min': [0],
'10%': [10, 10],
'50%': [80, 50],
'80%': 150,
'max': 200
}
});
// init slider input
var sliderInput0 = document.getElementById('kt_nouislider_modal1.1_input');
var sliderInput1 = document.getElementById('kt_nouislider_modal1.2_input');
var sliderInputs = [sliderInput1, sliderInput0];
slider.noUiSlider.on('update', function( values, handle ) {
sliderInputs[handle].value = values[handle];
});
}
return {
// public functions
init: function() {
demo1();
demo2();
demo3();
demo4();
demo5();
demo6();
modaldemo1();
modaldemo2();
modaldemo3();
}
};
}();
jQuery(document).ready(function() {
KTnoUiSliderDemos.init();
});
