File: /var/www/vhost/disk-apps/sigedo-demo.allup.com.co/public/assets/js/nuslider.script.js
$(document).ready(function () {
// handle
var handlesSlider = document.getElementById('slider-handles');
noUiSlider.create(handlesSlider, {
start: [4000, 8000],
range: {
'min': [2000],
'max': [10000]
}
});
// more than two slider
var handlesSlider4 = document.getElementById('slider-handles4');
noUiSlider.create(handlesSlider4, {
start: [4000, 8000, 12000, 16000],
connect: [false, true, true, false, true],
range: {
'min': [2000],
'max': [20000]
}
});
// range slider
var rangeSlider = document.getElementById('slider-range');
noUiSlider.create(rangeSlider, {
start: [4000],
range: {
'min': [2000],
'max': [10000]
}
});
// show value of range
var rangeSliderValueElement = document.getElementById('slider-range-value');
rangeSlider.noUiSlider.on('update', function (values, handle) {
rangeSliderValueElement.innerHTML = values[handle];
});
// step and snaping
var stepSlider = document.getElementById('slider-step');
noUiSlider.create(stepSlider, {
start: [4000],
step: 1000,
range: {
'min': [2000],
'max': [10000]
}
});
// non lenear slider
var nonLinearSlider = document.getElementById('slider-non-linear');
noUiSlider.create(nonLinearSlider, {
start: [4000],
range: {
'min': [2000],
'30%': [4000],
'70%': [8000],
'max': [10000]
}
});
//value
var nonLinearSliderValueElement = document.getElementById('slider-non-linear-value');
// Show the value for the *last* moved handle.
nonLinearSlider.noUiSlider.on('update', function (values, handle) {
nonLinearSliderValueElement.innerHTML = values[handle];
});
// stepping in non lenear slider
var nonLinearStepSlider = document.getElementById('slider-non-linear-step');
noUiSlider.create(nonLinearStepSlider, {
start: [500, 4000],
range: {
'min': [0],
'10%': [500, 500],
'50%': [4000, 1000],
'max': [10000]
}
});
//value
var nonLinearStepSliderValueElement = document.getElementById('slider-non-linear-step-value');
nonLinearStepSlider.noUiSlider.on('update', function (values, handle) {
nonLinearStepSliderValueElement.innerHTML = values[handle];
});
// tap
var tapSlider = document.getElementById('tap');
noUiSlider.create(tapSlider, {
start: 40,
behaviour: 'tap',
connect: [false, true],
range: {
'min': 20,
'max': 80
}
});
// drag
var dragSlider = document.getElementById('drag');
noUiSlider.create(dragSlider, {
start: [40, 60],
behaviour: 'drag',
connect: true,
range: {
'min': 20,
'max': 80
}
});
// fixed-drag
var dragFixedSlider = document.getElementById('drag-fixed');
noUiSlider.create(dragFixedSlider, {
start: [40, 60],
behaviour: 'drag-fixed',
connect: true,
range: {
'min': 20,
'max': 80
}
});
// snap
var snapSlider = document.getElementById('snap');
noUiSlider.create(snapSlider, {
start: 40,
behaviour: 'snap',
connect: [true, false],
range: {
'min': 20,
'max': 80
}
});
// hover
var hoverSlider = document.getElementById('hover');
var field = document.getElementById('hover-val');
noUiSlider.create(hoverSlider, {
start: 20,
behaviour: 'hover-snap',
direction: 'rtl',
range: {
'min': 0,
'max': 10
}
});
hoverSlider.noUiSlider.on('hover', function (value) {
field.innerHTML = value;
});
// combined
var dragTapSlider = document.getElementById('combined');
noUiSlider.create(dragTapSlider, {
start: [40, 60],
behaviour: 'drag-tap',
connect: true,
range: {
'min': 20,
'max': 80
}
});
// scale/pipe demos
var range_all_sliders = {
'min': [0],
'10%': [500, 500],
'50%': [4000, 1000],
'max': [10000]
};
// pipe range left to right
var pipsRange = document.getElementById('pips-range');
noUiSlider.create(pipsRange, {
range: range_all_sliders,
start: 0,
pips: {
mode: 'range',
density: 3
}
});
// right to left
var pipsRangeRtl = document.getElementById('pips-range-rtl');
noUiSlider.create(pipsRangeRtl, {
range: range_all_sliders,
start: 0,
direction: 'rtl',
pips: {
mode: 'range',
density: 3
}
});
// positions
var pipsPositions = document.getElementById('pips-positions');
noUiSlider.create(pipsPositions, {
range: range_all_sliders,
start: 0,
pips: {
mode: 'positions',
values: [0, 25, 50, 75, 100],
density: 4
}
});
// stepped positions
var positionsStepped = document.getElementById('pips-positions-stepped');
noUiSlider.create(positionsStepped, {
range: range_all_sliders,
start: 0,
pips: {
mode: 'positions',
values: [0, 25, 50, 75, 100],
density: 4,
stepped: true
}
});
// count
var pipsCount = document.getElementById('pips-count');
noUiSlider.create(pipsCount, {
range: range_all_sliders,
start: 0,
pips: {
mode: 'count',
values: 6,
density: 4
}
});
// stepped count
var pipsCountStepped = document.getElementById('pips-count-stepped');
noUiSlider.create(pipsCountStepped, {
range: range_all_sliders,
start: 0,
pips: {
mode: 'count',
values: 6,
density: 4,
stepped: true
}
});
// values
var pipsValues = document.getElementById('pips-values');
noUiSlider.create(pipsValues, {
range: range_all_sliders,
start: 0,
pips: {
mode: 'values',
values: [50, 552, 2251, 3200, 5000, 7080, 9000],
density: 4
}
});
// stepped values
var pipsValuesStepped = document.getElementById('pips-values-stepped');
noUiSlider.create(pipsValuesStepped, {
range: range_all_sliders,
start: 0,
pips: {
mode: 'values',
values: [50, 552, 4651, 4952, 5000, 7080, 9000],
density: 4,
stepped: true
}
});
// primary color slider
var primary = document.getElementById('primary-color-slider');
noUiSlider.create(primary, {
start: [20, 40],
connect: true,
range: {
'min': 10,
'max': 80
}
});
// success color slider
var success = document.getElementById('success-color-slider');
noUiSlider.create(success, {
start: [20, 40],
connect: true,
range: {
'min': 10,
'max': 80
}
});
// info color slider
var info = document.getElementById('info-color-slider');
noUiSlider.create(info, {
start: [20, 40],
connect: true,
range: {
'min': 10,
'max': 80
}
});
// warning color slider
var warning = document.getElementById('warning-color-slider');
noUiSlider.create(warning, {
start: [20, 40],
connect: true,
range: {
'min': 10,
'max': 80
}
});
// danger color slider
var danger = document.getElementById('danger-color-slider');
noUiSlider.create(danger, {
start: [20, 40],
connect: true,
range: {
'min': 10,
'max': 80
}
});
// custom color slider
var custom = document.getElementById('custom-color-slider');
noUiSlider.create(custom, {
start: [20, 40],
connect: true,
range: {
'min': 10,
'max': 80
}
});
// sizing
// custom color slider
var extra_large = document.getElementById('extra-large-slider');
noUiSlider.create(extra_large, {
start: [20, 40],
connect: true,
range: {
'min': 10,
'max': 80
}
});
// custom color slider
var large_slider = document.getElementById('large-slider');
noUiSlider.create(large_slider, {
start: [20, 50],
connect: true,
range: {
'min': 10,
'max': 80
}
});
// defualt-slider
var default_slider = document.getElementById('default-slider');
noUiSlider.create(default_slider, {
start: [20, 60],
connect: true,
range: {
'min': 10,
'max': 80
}
});
// small-slider
var small_slider = document.getElementById('small-slider');
noUiSlider.create(small_slider, {
start: [20, 60],
connect: true,
range: {
'min': 10,
'max': 80
}
});
// extra-small-slider
var extra_small_slider = document.getElementById('extra-small-slider');
noUiSlider.create(extra_small_slider, {
start: [20, 60],
connect: true,
range: {
'min': 10,
'max': 80
}
});
// filed circle
// custom color slider
var extra_large_filled_circle = document.getElementById('extra-large-slider-circle-filled');
noUiSlider.create(extra_large_filled_circle, {
start: [20, 40],
connect: true,
range: {
'min': 10,
'max': 80
}
});
// custom color slider
var large_slider_circle_filled = document.getElementById('large-slider-circle-filled');
noUiSlider.create(large_slider_circle_filled, {
start: [20, 50],
connect: true,
range: {
'min': 10,
'max': 80
}
});
// defualt-slider
var default_slider_circle_filled = document.getElementById('default-slider-circle-filled');
noUiSlider.create(default_slider_circle_filled, {
start: [20, 60],
connect: true,
range: {
'min': 10,
'max': 80
}
});
// small-slider
var small_slider_circle_filled = document.getElementById('small-slider-circle-filled');
noUiSlider.create(small_slider_circle_filled, {
start: [20, 60],
connect: true,
range: {
'min': 10,
'max': 80
}
});
// extra-small-slider
var extra_small_slider_circle_filled = document.getElementById('extra-small-slider-circle-filled');
noUiSlider.create(extra_small_slider_circle_filled, {
start: [20, 60],
connect: true,
range: {
'min': 10,
'max': 80
}
});
// square default
// extra large
var extra_large_square_default = document.getElementById('extra-large-slider-square-default');
noUiSlider.create(extra_large_square_default, {
start: [20, 40],
connect: true,
range: {
'min': 10,
'max': 80
}
});
// large
var large_slider_square_default = document.getElementById('large-slider-square-default');
noUiSlider.create(large_slider_square_default, {
start: [20, 50],
connect: true,
range: {
'min': 10,
'max': 80
}
});
// defualt-slider
var default_slider_square_default = document.getElementById('default-slider-square-default');
noUiSlider.create(default_slider_square_default, {
start: [20, 60],
connect: true,
range: {
'min': 10,
'max': 80
}
});
// small-slider
var small_slider_square_default = document.getElementById('small-slider-square-default');
noUiSlider.create(small_slider_square_default, {
start: [20, 60],
connect: true,
range: {
'min': 10,
'max': 80
}
});
// extra-small-slider
var extra_small_slider_square_default = document.getElementById('extra-small-slider-square-default');
noUiSlider.create(extra_small_slider_square_default, {
start: [20, 60],
connect: true,
range: {
'min': 10,
'max': 80
}
});
// vertical
var verticalSlider1 = document.getElementById('slider-vertical-1');
noUiSlider.create(verticalSlider1, {
start: 10,
orientation: 'vertical',
range: {
'min': 0,
'max': 100
}
});
var verticalSlider2 = document.getElementById('slider-vertical-2');
noUiSlider.create(verticalSlider2, {
start: 20,
orientation: 'vertical',
range: {
'min': 0,
'max': 100
}
});
var verticalSlider3 = document.getElementById('slider-vertical-3');
noUiSlider.create(verticalSlider3, {
start: 30,
orientation: 'vertical',
range: {
'min': 0,
'max': 100
}
});
var verticalSlider4 = document.getElementById('slider-vertical-4');
noUiSlider.create(verticalSlider4, {
start: 40,
orientation: 'vertical',
range: {
'min': 0,
'max': 100
}
});
var verticalSlider5 = document.getElementById('slider-vertical-5');
noUiSlider.create(verticalSlider5, {
start: 50,
orientation: 'vertical',
range: {
'min': 0,
'max': 100
}
});
// connect to lower
var verticalSlider_connectlower1 = document.getElementById('slider-vertical-connect-lower-1');
noUiSlider.create(verticalSlider_connectlower1, {
start: 0,
connect: [true, false],
orientation: 'vertical',
range: {
'min': 0,
'max': 100
}
});
var verticalSlider_connectlower2 = document.getElementById('slider-vertical-connect-lower-2');
noUiSlider.create(verticalSlider_connectlower2, {
start: 10,
connect: [true, false],
orientation: 'vertical',
range: {
'min': 0,
'max': 100
}
});
var verticalSlider_connectlower3 = document.getElementById('slider-vertical-connect-lower-3');
noUiSlider.create(verticalSlider_connectlower3, {
start: 20,
connect: [true, false],
orientation: 'vertical',
range: {
'min': 0,
'max': 100
}
});
var verticalSlider_connectlower4 = document.getElementById('slider-vertical-connect-lower-4');
noUiSlider.create(verticalSlider_connectlower4, {
start: 30,
connect: [true, false],
orientation: 'vertical',
range: {
'min': 0,
'max': 100
}
});
var verticalSlider_connectlower5 = document.getElementById('slider-vertical-connect-lower-5');
noUiSlider.create(verticalSlider_connectlower5, {
start: 40,
connect: [true, false],
orientation: 'vertical',
range: {
'min': 0,
'max': 100
}
});
// connect upper
var verticalSlider_connectupper1 = document.getElementById('slider-vertical-connect-upper-1');
noUiSlider.create(verticalSlider_connectupper1, {
start: 10,
connect: [true, false],
direction: 'rtl',
orientation: 'vertical',
range: {
'min': 0,
'max': 100
}
});
var verticalSlider_connectupper2 = document.getElementById('slider-vertical-connect-upper-2');
noUiSlider.create(verticalSlider_connectupper2, {
start: 30,
connect: [true, false],
direction: 'rtl',
orientation: 'vertical',
range: {
'min': 0,
'max': 100
}
});
var verticalSlider_connectupper3 = document.getElementById('slider-vertical-connect-upper-3');
noUiSlider.create(verticalSlider_connectupper3, {
start: 50,
connect: [true, false],
direction: 'rtl',
orientation: 'vertical',
range: {
'min': 0,
'max': 100
}
});
var verticalSlider_connectupper4 = document.getElementById('slider-vertical-connect-upper-4');
noUiSlider.create(verticalSlider_connectupper4, {
start: 70,
connect: [true, false],
direction: 'rtl',
orientation: 'vertical',
range: {
'min': 0,
'max': 100
}
});
var verticalSlider_connectupper5 = document.getElementById('slider-vertical-connect-upper-5');
noUiSlider.create(verticalSlider_connectupper5, {
start: 90,
connect: [true, false],
orientation: 'vertical',
direction: 'rtl',
range: {
'min': 0,
'max': 100
}
});
// tooltips
var verticalSlider_tooltip1 = document.getElementById('slider-vertical-tooltip-1');
noUiSlider.create(verticalSlider_tooltip1, {
start: 10,
connect: [true, false],
orientation: 'vertical',
tooltips: true,
direction: 'rtl',
range: {
'min': 0,
'max': 100
}
});
var verticalSlider_tooltip2 = document.getElementById('slider-vertical-tooltip-2');
noUiSlider.create(verticalSlider_tooltip2, {
start: 20,
connect: [true, false],
orientation: 'vertical',
tooltips: true,
direction: 'rtl',
range: {
'min': 0,
'max': 100
}
});
var verticalSlider_tooltip3 = document.getElementById('slider-vertical-tooltip-3');
noUiSlider.create(verticalSlider_tooltip3, {
start: 40,
connect: [true, false],
orientation: 'vertical',
tooltips: true,
direction: 'rtl',
range: {
'min': 0,
'max': 100
}
});
var verticalSlider_tooltip4 = document.getElementById('slider-vertical-tooltip-4');
noUiSlider.create(verticalSlider_tooltip4, {
start: 60,
connect: [true, false],
orientation: 'vertical',
tooltips: true,
direction: 'rtl',
range: {
'min': 0,
'max': 100
}
});
var verticalSlider_tooltip5 = document.getElementById('slider-vertical-tooltip-5');
noUiSlider.create(verticalSlider_tooltip5, {
start: 70,
connect: [true, false],
orientation: 'vertical',
tooltips: true,
direction: 'rtl',
range: {
'min': 0,
'max': 100
}
});
});