Add project files.
This commit is contained in:
312
assets/js/pages/crud/forms/widgets/nouislider.js
Normal file
312
assets/js/pages/crud/forms/widgets/nouislider.js
Normal file
@ -0,0 +1,312 @@
|
||||
// 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();
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user