dev-chiefworks
990 lines
24 KiB
JavaScript
990 lines
24 KiB
JavaScript
/* ------------------------------------------------------------------------------
|
|
*
|
|
* # NoUI Sliders
|
|
*
|
|
* Specific JS code additions for extra_sliders_noui.html page
|
|
*
|
|
* Version: 1.0
|
|
* Latest update: Nov 20, 2015
|
|
*
|
|
* ---------------------------------------------------------------------------- */
|
|
|
|
$(function() {
|
|
|
|
|
|
// Handles
|
|
// ------------------------------
|
|
|
|
// Setup
|
|
var slider_handles = document.getElementById('noui-slider-handles');
|
|
noUiSlider.create(slider_handles, {
|
|
start: [40, 80],
|
|
range: {
|
|
'min': [20],
|
|
'max': [100]
|
|
}
|
|
});
|
|
|
|
// Display values
|
|
var slider_handles_vals = [
|
|
document.getElementById('noui-handles-lower-val'),
|
|
document.getElementById('noui-handles-upper-val')
|
|
];
|
|
slider_handles.noUiSlider.on('update', function( values, handle ) {
|
|
slider_handles_vals[handle].innerHTML = values[handle];
|
|
});
|
|
|
|
|
|
// Ranges
|
|
// ------------------------------
|
|
|
|
// Setup
|
|
var slider_range = document.getElementById('noui-slider-range');
|
|
noUiSlider.create(slider_range, {
|
|
start: [60],
|
|
range: {
|
|
'min': [20],
|
|
'max': [100]
|
|
}
|
|
});
|
|
|
|
// Display values
|
|
var slider_range_val = document.getElementById('noui-range-val');
|
|
slider_range.noUiSlider.on('update', function( values, handle ) {
|
|
slider_range_val.innerHTML = values[handle];
|
|
});
|
|
|
|
|
|
// Stepping
|
|
// ------------------------------
|
|
|
|
// Setup
|
|
var slider_stepping = document.getElementById('noui-slider-stepping');
|
|
noUiSlider.create(slider_stepping, {
|
|
start: [40],
|
|
step: 10,
|
|
range: {
|
|
'min': [20],
|
|
'max': [100]
|
|
},
|
|
});
|
|
|
|
// Display values
|
|
var slider_stepping_val = document.getElementById('noui-stepping-val');
|
|
slider_stepping.noUiSlider.on('update', function( values, handle ) {
|
|
slider_stepping_val.innerHTML = values[handle];
|
|
});
|
|
|
|
|
|
// Non-linear slider
|
|
// ------------------------------
|
|
|
|
// Define element
|
|
var slider_nonlinear = document.getElementById('noui-slider-nonlinear');
|
|
|
|
// Create slider
|
|
noUiSlider.create(slider_nonlinear, {
|
|
start: [ 40 ],
|
|
range: {
|
|
'min': [ 20 ],
|
|
'30%': [ 40 ],
|
|
'70%': [ 80 ],
|
|
'max': [ 100 ]
|
|
}
|
|
});
|
|
|
|
// Define element for values
|
|
var slider_nonlinear_val = document.getElementById('noui-nonlinear-val');
|
|
|
|
// Show the value for the *last* moved handle.
|
|
slider_nonlinear.noUiSlider.on('update', function( values, handle ) {
|
|
slider_nonlinear_val.innerHTML = values[handle];
|
|
});
|
|
|
|
|
|
// Non-linear stepping
|
|
// ------------------------------
|
|
|
|
// Define element
|
|
var slider_nonlinear_step = document.getElementById('noui-slider-nonlinear-stepping');
|
|
|
|
// Create slider
|
|
noUiSlider.create(slider_nonlinear_step, {
|
|
start: [ 5, 40 ],
|
|
range: {
|
|
'min': [ 0 ],
|
|
'10%': [ 5, 5 ],
|
|
'50%': [ 40, 10 ],
|
|
'max': [ 100 ]
|
|
}
|
|
});
|
|
|
|
// Define elements for values
|
|
var slider_nonlinear_step_vals = [
|
|
document.getElementById('noui-nonlinear-stepping-lower-val'),
|
|
document.getElementById('noui-nonlinear-stepping-upper-val')
|
|
];
|
|
|
|
// Show the values
|
|
slider_nonlinear_step.noUiSlider.on('update', function( values, handle ) {
|
|
slider_nonlinear_step_vals[handle].innerHTML = values[handle];
|
|
});
|
|
|
|
|
|
// Snapping between steps
|
|
// ------------------------------
|
|
|
|
// Define element
|
|
var slider_nonlinear_snap = document.getElementById('noui-slider-snapping');
|
|
|
|
// Create slider
|
|
noUiSlider.create(slider_nonlinear_snap, {
|
|
start: [50, 800],
|
|
snap: true,
|
|
connect: true,
|
|
range: {
|
|
'min': 0,
|
|
'10%': 50,
|
|
'20%': 100,
|
|
'30%': 150,
|
|
'40%': 500,
|
|
'50%': 800,
|
|
'max': 1000
|
|
}
|
|
});
|
|
|
|
// Define elements for values
|
|
var slider_nonlinear_snap_vals = [
|
|
document.getElementById('noui-slider-snapping-lower-val'),
|
|
document.getElementById('noui-slider-snapping-upper-val')
|
|
];
|
|
|
|
// Show the values
|
|
slider_nonlinear_snap.noUiSlider.on('update', function( values, handle ) {
|
|
slider_nonlinear_snap_vals[handle].innerHTML = values[handle];
|
|
});
|
|
|
|
|
|
|
|
// Behaviours
|
|
// ------------------------------
|
|
|
|
//
|
|
// Slider behaviour
|
|
//
|
|
|
|
// Define element
|
|
slider_behaviour = document.getElementById('noui-slider-behaviour');
|
|
|
|
// Create slider
|
|
noUiSlider.create(slider_behaviour, {
|
|
start: [ 40, 60 ],
|
|
step: 10,
|
|
behaviour: 'drag',
|
|
connect: true,
|
|
range: {
|
|
'min': 20,
|
|
'max': 80
|
|
}
|
|
});
|
|
|
|
// Define elements for values
|
|
var slider_behaviour_vals = [
|
|
document.getElementById('noui-slider-behaviour-lower-val'),
|
|
document.getElementById('noui-slider-behaviour-upper-val')
|
|
];
|
|
|
|
// Show the values
|
|
slider_behaviour.noUiSlider.on('update', function( values, handle ) {
|
|
slider_behaviour_vals[handle].innerHTML = values[handle];
|
|
});
|
|
|
|
|
|
//
|
|
// Tap behaviour
|
|
//
|
|
|
|
// Define element
|
|
slider_tap_behaviour = document.getElementById('noui-slider-tap');
|
|
|
|
// Create slider
|
|
noUiSlider.create(slider_tap_behaviour, {
|
|
start: 40,
|
|
behaviour: 'tap',
|
|
connect: 'upper',
|
|
range: {
|
|
'min': 20,
|
|
'max': 80
|
|
}
|
|
});
|
|
|
|
// Define elements for values
|
|
var slider_tap_behaviour_val = document.getElementById('noui-slider-tap-val');
|
|
|
|
// Show the values
|
|
slider_tap_behaviour.noUiSlider.on('update', function( values, handle ) {
|
|
slider_tap_behaviour_val.innerHTML = values[handle];
|
|
});
|
|
|
|
|
|
//
|
|
// Drag behaviour
|
|
//
|
|
|
|
// Define element
|
|
var slider_drag_behaviour = document.getElementById('noui-slider-drag');
|
|
|
|
// Create slider
|
|
noUiSlider.create(slider_drag_behaviour, {
|
|
start: [ 40, 60 ],
|
|
behaviour: 'drag',
|
|
connect: true,
|
|
range: {
|
|
'min': 20,
|
|
'max': 80
|
|
}
|
|
});
|
|
|
|
// Define elements for values
|
|
var slider_drag_behaviour_vals = [
|
|
document.getElementById('noui-slider-drag-lower-val'),
|
|
document.getElementById('noui-slider-drag-upper-val')
|
|
];
|
|
|
|
// Show the values
|
|
slider_drag_behaviour.noUiSlider.on('update', function( values, handle ) {
|
|
slider_drag_behaviour_vals[handle].innerHTML = values[handle];
|
|
});
|
|
|
|
|
|
//
|
|
// Fixed dragging
|
|
//
|
|
|
|
// Define element
|
|
slider_drag_fixed = document.getElementById('noui-slider-drag-fixed');
|
|
|
|
// Create slider
|
|
noUiSlider.create(slider_drag_fixed, {
|
|
start: [ 40, 60 ],
|
|
behaviour: 'drag-fixed',
|
|
connect: true,
|
|
range: {
|
|
'min': 20,
|
|
'max': 80
|
|
}
|
|
});
|
|
|
|
// Define elements for values
|
|
var slider_drag_fixed_vals = [
|
|
document.getElementById('noui-slider-fixed-lower-val'),
|
|
document.getElementById('noui-slider-fixed-upper-val')
|
|
];
|
|
|
|
// Show the values
|
|
slider_drag_fixed.noUiSlider.on('update', function( values, handle ) {
|
|
slider_drag_fixed_vals[handle].innerHTML = values[handle];
|
|
});
|
|
|
|
|
|
//
|
|
// Snap behaviour
|
|
//
|
|
|
|
// Define element
|
|
slider_snap_behaviour = document.getElementById('noui-slider-snap');
|
|
|
|
// Create slider
|
|
noUiSlider.create(slider_snap_behaviour, {
|
|
start: 40,
|
|
behaviour: 'snap',
|
|
connect: 'lower',
|
|
range: {
|
|
'min': 20,
|
|
'max': 80
|
|
}
|
|
});
|
|
|
|
// Define elements for values
|
|
var slider_snap_behaviour_val = document.getElementById('noui-slider-snap-val');
|
|
|
|
// Show the values
|
|
slider_snap_behaviour.noUiSlider.on('update', function( values, handle ) {
|
|
slider_snap_behaviour_val.innerHTML = values[handle];
|
|
});
|
|
|
|
|
|
//
|
|
// Combined options
|
|
//
|
|
|
|
// Define element
|
|
slider_combined = document.getElementById('noui-slider-combined');
|
|
|
|
// Create slider
|
|
noUiSlider.create(slider_combined, {
|
|
start: [ 40, 60 ],
|
|
behaviour: 'drag-tap',
|
|
connect: true,
|
|
range: {
|
|
'min': 20,
|
|
'max': 80
|
|
}
|
|
});
|
|
|
|
// Define elements for values
|
|
var slider_combined_vals = [
|
|
document.getElementById('noui-slider-combined-lower-val'),
|
|
document.getElementById('noui-slider-combined-upper-val')
|
|
];
|
|
|
|
// Show the values
|
|
slider_combined.noUiSlider.on('update', function( values, handle ) {
|
|
slider_combined_vals[handle].innerHTML = values[handle];
|
|
});
|
|
|
|
|
|
|
|
// Other examples
|
|
// ------------------------------
|
|
|
|
//
|
|
// Tooltip
|
|
//
|
|
|
|
// Define element
|
|
var slider_tooltip = document.getElementById('noui-slider-tooltip');
|
|
|
|
// Create slider
|
|
noUiSlider.create(slider_tooltip, {
|
|
start: [20, 80],
|
|
tooltips: true,
|
|
connect: true,
|
|
range: {
|
|
'min': 0,
|
|
'max': 100
|
|
}
|
|
});
|
|
|
|
// Define elements for values
|
|
var slider_tooltip_vals = [
|
|
document.getElementById('noui-slider-tooltip-lower-val'),
|
|
document.getElementById('noui-slider-tooltip-upper-val')
|
|
];
|
|
|
|
// Show the values
|
|
slider_tooltip.noUiSlider.on('update', function( values, handle ) {
|
|
slider_tooltip_vals[handle].innerHTML = values[handle];
|
|
});
|
|
|
|
|
|
//
|
|
// Set minimum handles distance
|
|
//
|
|
|
|
// Define element
|
|
var slider_margin = document.getElementById('noui-slider-margin');
|
|
|
|
// Create slider
|
|
noUiSlider.create(slider_margin, {
|
|
start: [ 20, 80 ],
|
|
connect: true,
|
|
margin: 30,
|
|
range: {
|
|
'min': 0,
|
|
'max': 100
|
|
}
|
|
});
|
|
|
|
// Define elements for values
|
|
var slider_margin_vals = [
|
|
document.getElementById('noui-slider-margin-lower-val'),
|
|
document.getElementById('noui-slider-margin-upper-val')
|
|
];
|
|
|
|
// Show the values
|
|
slider_margin.noUiSlider.on('update', function( values, handle ) {
|
|
slider_margin_vals[handle].innerHTML = values[handle];
|
|
});
|
|
|
|
|
|
//
|
|
// RTL direction
|
|
//
|
|
|
|
// Define element
|
|
var slider_direction = document.getElementById('noui-slider-direction');
|
|
|
|
// Create slider
|
|
noUiSlider.create(slider_direction, {
|
|
start: 20,
|
|
direction: 'rtl',
|
|
connect: 'lower',
|
|
range: {
|
|
'min': 0,
|
|
'max': 100
|
|
}
|
|
});
|
|
|
|
// Define elements for values
|
|
var slider_direction_val = document.getElementById('noui-slider-direction-val');
|
|
|
|
// Show the values
|
|
slider_direction.noUiSlider.on('update', function( values, handle ) {
|
|
slider_direction_val.innerHTML = values[handle];
|
|
});
|
|
|
|
|
|
//
|
|
// Connect lower side
|
|
//
|
|
|
|
// Define element
|
|
var slider_connect_lower = document.getElementById('noui-slider-connect-lower');
|
|
|
|
// Create slider
|
|
noUiSlider.create(slider_connect_lower, {
|
|
start: 40,
|
|
connect: 'lower',
|
|
range: {
|
|
'min': 0,
|
|
'max': 100
|
|
}
|
|
});
|
|
|
|
// Define elements for values
|
|
var slider_connect_lower_val = document.getElementById('noui-slider-connect-lower-val');
|
|
|
|
// Show the values
|
|
slider_connect_lower.noUiSlider.on('update', function( values, handle ) {
|
|
slider_connect_lower_val.innerHTML = values[handle];
|
|
});
|
|
|
|
|
|
//
|
|
// Skip certain steps
|
|
//
|
|
|
|
// Define element
|
|
var slider_skip = document.getElementById('noui-slider-skip-steps');
|
|
|
|
// Create slider
|
|
noUiSlider.create(slider_skip, {
|
|
range: {
|
|
'min': 0,
|
|
'10%': 10,
|
|
'20%': 20,
|
|
'30%': 30,
|
|
// Nope, 40 is no fun.
|
|
'50%': 50,
|
|
'60%': 60,
|
|
'70%': 70,
|
|
// I never liked 80.
|
|
'90%': 90,
|
|
'max': 100
|
|
},
|
|
snap: true,
|
|
connect: true,
|
|
start: [20, 70]
|
|
});
|
|
|
|
// Define elements for values
|
|
var slider_skip_vals = [
|
|
document.getElementById('noui-slider-skip-lower-val'),
|
|
document.getElementById('noui-slider-skip-upper-val')
|
|
];
|
|
|
|
// Show the values
|
|
slider_skip.noUiSlider.on('update', function( values, handle ) {
|
|
slider_skip_vals[handle].innerHTML = values[handle];
|
|
});
|
|
|
|
|
|
//
|
|
// Connect upper side
|
|
//
|
|
|
|
// Define element
|
|
var slider_connect_upper = document.getElementById('noui-slider-connect-upper');
|
|
|
|
// Create slider
|
|
noUiSlider.create(slider_connect_upper, {
|
|
start: 40,
|
|
connect: 'upper',
|
|
range: {
|
|
'min': 0,
|
|
'max': 100
|
|
}
|
|
});
|
|
|
|
// Define elements for values
|
|
var slider_connect_upper_val = document.getElementById('noui-slider-connect-upper-val');
|
|
|
|
// Show the values
|
|
slider_connect_upper.noUiSlider.on('update', function( values, handle ) {
|
|
slider_connect_upper_val.innerHTML = values[handle];
|
|
});
|
|
|
|
|
|
|
|
// Sliders with pips
|
|
// ------------------------------
|
|
|
|
// Demo data for ranges
|
|
var range_all_sliders = {
|
|
'min': [ 0 ],
|
|
'10%': [ 5, 5 ],
|
|
'50%': [ 40, 10 ],
|
|
'max': [ 100 ]
|
|
};
|
|
|
|
|
|
//
|
|
// Range slider pips
|
|
//
|
|
|
|
// Define element
|
|
var pips_range = document.getElementById('noui-slider-pips-range');
|
|
|
|
// Create slider
|
|
noUiSlider.create(pips_range, {
|
|
range: range_all_sliders,
|
|
start: 40,
|
|
connect: 'lower',
|
|
pips: {
|
|
mode: 'range',
|
|
density: 3
|
|
}
|
|
});
|
|
|
|
|
|
//
|
|
// Filtered pips
|
|
//
|
|
|
|
// Filter pips
|
|
function filter500(value, type) {
|
|
return value % 10 ? 2 : 1;
|
|
}
|
|
|
|
// Define element
|
|
var pips_filter = document.getElementById('noui-slider-pips-filter');
|
|
|
|
// Create slider
|
|
noUiSlider.create(pips_filter, {
|
|
range: range_all_sliders,
|
|
start: 40,
|
|
connect: 'lower',
|
|
pips: {
|
|
mode: 'steps',
|
|
density: 2,
|
|
filter: filter500
|
|
}
|
|
});
|
|
|
|
|
|
//
|
|
// RTL version
|
|
//
|
|
|
|
// Define element
|
|
pips_rtl = document.getElementById('noui-slider-pips-rtl');
|
|
|
|
// Create slider
|
|
noUiSlider.create(pips_rtl, {
|
|
range: range_all_sliders,
|
|
start: 60,
|
|
connect: 'lower',
|
|
direction: 'rtl',
|
|
pips: {
|
|
mode: 'range',
|
|
density: 3
|
|
}
|
|
});
|
|
|
|
|
|
//
|
|
// Positions mode
|
|
//
|
|
|
|
// Define element
|
|
var pips_positions = document.getElementById('noui-slider-pips-positions');
|
|
|
|
// Create slider
|
|
noUiSlider.create(pips_positions, {
|
|
range: range_all_sliders,
|
|
start: 18,
|
|
connect: 'upper',
|
|
pips: {
|
|
mode: 'positions',
|
|
values: [0,25,50,75,100],
|
|
density: 4
|
|
}
|
|
});
|
|
|
|
|
|
//
|
|
// Count mode
|
|
//
|
|
|
|
// Define element
|
|
var pips_count = document.getElementById('noui-slider-pips-count');
|
|
|
|
// Create slider
|
|
noUiSlider.create(pips_count, {
|
|
range: range_all_sliders,
|
|
start: 20,
|
|
connect: 'upper',
|
|
pips: {
|
|
mode: 'count',
|
|
values: 6,
|
|
density: 4
|
|
}
|
|
});
|
|
|
|
|
|
//
|
|
// Values mode
|
|
//
|
|
|
|
// Define element
|
|
var pips_values = document.getElementById('noui-slider-pips-values');
|
|
|
|
// Create slider
|
|
noUiSlider.create(pips_values, {
|
|
range: range_all_sliders,
|
|
start: 40,
|
|
connect: 'upper',
|
|
pips: {
|
|
mode: 'values',
|
|
values: [1, 10, 26, 57, 79, 99],
|
|
density: 4
|
|
}
|
|
});
|
|
|
|
|
|
|
|
// Vertical sliders
|
|
// ------------------------------
|
|
|
|
//
|
|
// Basic examples
|
|
//
|
|
|
|
// First
|
|
var slider_vertical_1 = document.getElementById('noui-slider-values1');
|
|
noUiSlider.create(slider_vertical_1, {
|
|
start: 20,
|
|
orientation: 'vertical',
|
|
range: {
|
|
'min': 0,
|
|
'max': 100
|
|
}
|
|
});
|
|
|
|
// Second
|
|
var slider_vertical_2 = document.getElementById('noui-slider-values2');
|
|
noUiSlider.create(slider_vertical_2, {
|
|
start: 40,
|
|
orientation: 'vertical',
|
|
range: {
|
|
'min': 0,
|
|
'max': 100
|
|
}
|
|
});
|
|
|
|
// Third
|
|
var slider_vertical_3 = document.getElementById('noui-slider-values3');
|
|
noUiSlider.create(slider_vertical_3, {
|
|
start: 60,
|
|
orientation: 'vertical',
|
|
range: {
|
|
'min': 0,
|
|
'max': 100
|
|
}
|
|
});
|
|
|
|
// Fourth
|
|
var slider_vertical_4 = document.getElementById('noui-slider-values4');
|
|
noUiSlider.create(slider_vertical_4, {
|
|
start: 80,
|
|
orientation: 'vertical',
|
|
range: {
|
|
'min': 0,
|
|
'max': 100
|
|
}
|
|
});
|
|
|
|
|
|
//
|
|
// Connect to upper side
|
|
//
|
|
|
|
// First
|
|
var slider_vertical_upper_1 = document.getElementById('noui-slider-upper1');
|
|
noUiSlider.create(slider_vertical_upper_1, {
|
|
start: 20,
|
|
orientation: 'vertical',
|
|
connect: 'upper',
|
|
range: {
|
|
'min': 0,
|
|
'max': 100
|
|
}
|
|
});
|
|
|
|
// Second
|
|
var slider_vertical_upper_2 = document.getElementById('noui-slider-upper2');
|
|
noUiSlider.create(slider_vertical_upper_2, {
|
|
start: 40,
|
|
orientation: 'vertical',
|
|
connect: 'upper',
|
|
range: {
|
|
'min': 0,
|
|
'max': 100
|
|
}
|
|
});
|
|
|
|
// Third
|
|
var slider_vertical_upper_3 = document.getElementById('noui-slider-upper3');
|
|
noUiSlider.create(slider_vertical_upper_3, {
|
|
start: 60,
|
|
orientation: 'vertical',
|
|
connect: 'upper',
|
|
range: {
|
|
'min': 0,
|
|
'max': 100
|
|
}
|
|
});
|
|
|
|
// Fourth
|
|
var slider_vertical_upper_4 = document.getElementById('noui-slider-upper4');
|
|
noUiSlider.create(slider_vertical_upper_4, {
|
|
start: 80,
|
|
orientation: 'vertical',
|
|
connect: 'upper',
|
|
range: {
|
|
'min': 0,
|
|
'max': 100
|
|
}
|
|
});
|
|
|
|
|
|
//
|
|
// Connect to lower side
|
|
//
|
|
|
|
// First
|
|
var slider_vertical_lower_1 = document.getElementById('noui-slider-lower1');
|
|
noUiSlider.create(slider_vertical_lower_1, {
|
|
start: 20,
|
|
orientation: 'vertical',
|
|
connect: 'lower',
|
|
range: {
|
|
'min': 0,
|
|
'max': 100
|
|
}
|
|
});
|
|
|
|
// Second
|
|
var slider_vertical_lower_2 = document.getElementById('noui-slider-lower2');
|
|
noUiSlider.create(slider_vertical_lower_2, {
|
|
start: 40,
|
|
orientation: 'vertical',
|
|
connect: 'lower',
|
|
range: {
|
|
'min': 0,
|
|
'max': 100
|
|
}
|
|
});
|
|
|
|
// Third
|
|
var slider_vertical_lower_3 = document.getElementById('noui-slider-lower3');
|
|
noUiSlider.create(slider_vertical_lower_3, {
|
|
start: 60,
|
|
orientation: 'vertical',
|
|
connect: 'lower',
|
|
range: {
|
|
'min': 0,
|
|
'max': 100
|
|
}
|
|
});
|
|
|
|
// Fourth
|
|
var slider_vertical_lower_4 = document.getElementById('noui-slider-lower4');
|
|
noUiSlider.create(slider_vertical_lower_4, {
|
|
start: 80,
|
|
orientation: 'vertical',
|
|
connect: 'lower',
|
|
range: {
|
|
'min': 0,
|
|
'max': 100
|
|
}
|
|
});
|
|
|
|
|
|
//
|
|
// Vertical range
|
|
//
|
|
|
|
// First
|
|
var slider_range_1 = document.getElementById('noui-slider-range1');
|
|
noUiSlider.create(slider_range_1, {
|
|
start: [ 15, 85 ],
|
|
orientation: 'vertical',
|
|
connect: true,
|
|
range: {
|
|
'min': 0,
|
|
'max': 100
|
|
}
|
|
});
|
|
|
|
// Second
|
|
var slider_range_2 = document.getElementById('noui-slider-range2');
|
|
noUiSlider.create(slider_range_2, {
|
|
start: [ 30, 70 ],
|
|
orientation: 'vertical',
|
|
connect: true,
|
|
range: {
|
|
'min': 0,
|
|
'max': 100
|
|
}
|
|
});
|
|
|
|
|
|
//
|
|
// Top to bottom pips
|
|
//
|
|
|
|
// First
|
|
var slider_pips_top_1 = document.getElementById('noui-slider-top1');
|
|
noUiSlider.create(slider_pips_top_1, {
|
|
range: range_all_sliders,
|
|
start: 40,
|
|
connect: 'lower',
|
|
orientation: 'vertical',
|
|
pips: {
|
|
mode: 'range',
|
|
density: 5
|
|
}
|
|
});
|
|
|
|
// Second
|
|
var slider_pips_top_2 = document.getElementById('noui-slider-top2');
|
|
noUiSlider.create(slider_pips_top_2, {
|
|
range: range_all_sliders,
|
|
start: 60,
|
|
connect: 'lower',
|
|
orientation: 'vertical',
|
|
pips: {
|
|
mode: 'range',
|
|
density: 5
|
|
}
|
|
});
|
|
|
|
|
|
//
|
|
// Bottom to top pips
|
|
//
|
|
|
|
// First
|
|
var slider_pips_bottom_1 = document.getElementById('noui-slider-bottom1');
|
|
noUiSlider.create(slider_pips_bottom_1, {
|
|
range: range_all_sliders,
|
|
start: 40,
|
|
connect: 'lower',
|
|
orientation: 'vertical',
|
|
direction: 'rtl',
|
|
pips: {
|
|
mode: 'range',
|
|
density: 5
|
|
}
|
|
});
|
|
|
|
// Second
|
|
var slider_pips_bottom_2 = document.getElementById('noui-slider-bottom2');
|
|
noUiSlider.create(slider_pips_bottom_2, {
|
|
range: range_all_sliders,
|
|
start: 60,
|
|
connect: 'lower',
|
|
orientation: 'vertical',
|
|
direction: 'rtl',
|
|
pips: {
|
|
mode: 'range',
|
|
density: 5
|
|
}
|
|
});
|
|
|
|
|
|
|
|
// Optional styling
|
|
// ------------------------------
|
|
|
|
//
|
|
// Colors
|
|
//
|
|
|
|
// Define elements
|
|
var color1 = document.getElementById('noui-slider-color-demo1'),
|
|
color2 = document.getElementById('noui-slider-color-demo2'),
|
|
color3 = document.getElementById('noui-slider-color-demo3'),
|
|
color4 = document.getElementById('noui-slider-color-demo4'),
|
|
color5 = document.getElementById('noui-slider-color-demo5'),
|
|
color6 = document.getElementById('noui-slider-color-demo6');
|
|
|
|
// Set common options
|
|
var color_options = {
|
|
start: [2, 8],
|
|
connect: true,
|
|
range: {
|
|
'min': 0,
|
|
'max': 10
|
|
}
|
|
}
|
|
|
|
// Create sliders
|
|
noUiSlider.create(color1, color_options);
|
|
noUiSlider.create(color2, color_options);
|
|
noUiSlider.create(color3, color_options);
|
|
noUiSlider.create(color4, color_options);
|
|
noUiSlider.create(color5, color_options);
|
|
noUiSlider.create(color6, color_options);
|
|
|
|
|
|
//
|
|
// Sizes and styles
|
|
//
|
|
|
|
// Define elements
|
|
var default_size1 = document.getElementById('slider-default-lg'),
|
|
default_size2 = document.getElementById('slider-default-md'),
|
|
default_size3 = document.getElementById('slider-default-sm'),
|
|
default_size4 = document.getElementById('slider-default-xs'),
|
|
|
|
solid_size1 = document.getElementById('slider-solid-lg'),
|
|
solid_size2 = document.getElementById('slider-solid-md'),
|
|
solid_size3 = document.getElementById('slider-solid-sm'),
|
|
solid_size4 = document.getElementById('slider-solid-xs'),
|
|
|
|
white_size1 = document.getElementById('slider-white-lg'),
|
|
white_size2 = document.getElementById('slider-white-md'),
|
|
white_size3 = document.getElementById('slider-white-sm'),
|
|
white_size4 = document.getElementById('slider-white-xs');
|
|
|
|
// Create sliders
|
|
noUiSlider.create(default_size1, color_options);
|
|
noUiSlider.create(default_size2, color_options);
|
|
noUiSlider.create(default_size3, color_options);
|
|
noUiSlider.create(default_size4, color_options);
|
|
|
|
noUiSlider.create(solid_size1, color_options);
|
|
noUiSlider.create(solid_size2, color_options);
|
|
noUiSlider.create(solid_size3, color_options);
|
|
noUiSlider.create(solid_size4, color_options);
|
|
|
|
noUiSlider.create(white_size1, color_options);
|
|
noUiSlider.create(white_size2, color_options);
|
|
noUiSlider.create(white_size3, color_options);
|
|
noUiSlider.create(white_size4, color_options);
|
|
|
|
});
|