File "extra_sliders_noui.js"
Full Path: /home/magicrsz/public_html/assets/admin/global_assets/js/demo_pages/extra_sliders_noui.js
File size: 29.54 KB
MIME-type: text/plain
Charset: utf-8
/* ------------------------------------------------------------------------------
*
* # NoUI Sliders
*
* Demo JS code for extra_sliders_noui.html page
*
* ---------------------------------------------------------------------------- */
// Setup module
// ------------------------------
var NouiSlider = function() {
//
// Setup module components
//
// NoUI slider examples
var _componentNouiSlider = function() {
if (typeof noUiSlider == 'undefined') {
console.warn('Warning - nouislider.min.js is not loaded.');
return;
}
// Handles
// ------------------------------
// Setup
var slider_handles = document.getElementById('noui-slider-handles');
noUiSlider.create(slider_handles, {
start: [40, 80],
range: {
'min': [20],
'max': [100]
},
direction: $('html').attr('dir') == 'rtl' ? 'rtl' : 'ltr'
});
// 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]
},
direction: $('html').attr('dir') == 'rtl' ? 'rtl' : 'ltr'
});
// 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]
},
direction: $('html').attr('dir') == 'rtl' ? 'rtl' : 'ltr'
});
// 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 ]
},
direction: $('html').attr('dir') == 'rtl' ? 'rtl' : 'ltr'
});
// 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 ]
},
direction: $('html').attr('dir') == 'rtl' ? 'rtl' : 'ltr'
});
// 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
},
direction: $('html').attr('dir') == 'rtl' ? 'rtl' : 'ltr'
});
// 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
},
direction: $('html').attr('dir') == 'rtl' ? 'rtl' : 'ltr'
});
// 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
},
direction: $('html').attr('dir') == 'rtl' ? 'rtl' : 'ltr'
});
// 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
},
direction: $('html').attr('dir') == 'rtl' ? 'rtl' : 'ltr'
});
// 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
},
direction: $('html').attr('dir') == 'rtl' ? 'rtl' : 'ltr'
});
// 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
},
direction: $('html').attr('dir') == 'rtl' ? 'rtl' : 'ltr'
});
// 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
},
direction: $('html').attr('dir') == 'rtl' ? 'rtl' : 'ltr'
});
// 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
},
direction: $('html').attr('dir') == 'rtl' ? 'rtl' : 'ltr'
});
// 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
},
direction: $('html').attr('dir') == 'rtl' ? 'rtl' : 'ltr'
});
// 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
},
direction: $('html').attr('dir') == 'rtl' ? 'rtl' : 'ltr'
});
// 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],
direction: $('html').attr('dir') == 'rtl' ? 'rtl' : 'ltr'
});
// 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
},
direction: $('html').attr('dir') == 'rtl' ? 'rtl' : 'ltr'
});
// 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
},
direction: $('html').attr('dir') == 'rtl' ? 'rtl' : 'ltr'
});
//
// Filtered pips
//
// Filter pips
function filter500(value, type) {
if (type === 0) {
return value = 0 ? -1 : 0;
}
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
},
direction: $('html').attr('dir') == 'rtl' ? 'rtl' : 'ltr'
});
//
// 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
},
direction: $('html').attr('dir') == 'rtl' ? 'rtl' : 'ltr'
});
//
// 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
},
direction: $('html').attr('dir') == 'rtl' ? 'rtl' : 'ltr'
});
//
// 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
},
direction: $('html').attr('dir') == 'rtl' ? 'rtl' : 'ltr'
});
// 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
},
direction: $('html').attr('dir') == 'rtl' ? 'rtl' : 'ltr'
});
// Second
var slider_vertical_2 = document.getElementById('noui-slider-values2');
noUiSlider.create(slider_vertical_2, {
start: 40,
orientation: 'vertical',
range: {
'min': 0,
'max': 100
},
direction: $('html').attr('dir') == 'rtl' ? 'rtl' : 'ltr'
});
// Third
var slider_vertical_3 = document.getElementById('noui-slider-values3');
noUiSlider.create(slider_vertical_3, {
start: 60,
orientation: 'vertical',
range: {
'min': 0,
'max': 100
},
direction: $('html').attr('dir') == 'rtl' ? 'rtl' : 'ltr'
});
// Fourth
var slider_vertical_4 = document.getElementById('noui-slider-values4');
noUiSlider.create(slider_vertical_4, {
start: 80,
orientation: 'vertical',
range: {
'min': 0,
'max': 100
},
direction: $('html').attr('dir') == 'rtl' ? 'rtl' : 'ltr'
});
//
// 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
},
direction: $('html').attr('dir') == 'rtl' ? 'rtl' : 'ltr'
});
// 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
},
direction: $('html').attr('dir') == 'rtl' ? 'rtl' : 'ltr'
});
// 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
},
direction: $('html').attr('dir') == 'rtl' ? 'rtl' : 'ltr'
});
// 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
},
direction: $('html').attr('dir') == 'rtl' ? 'rtl' : 'ltr'
});
//
// 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
},
direction: $('html').attr('dir') == 'rtl' ? 'rtl' : 'ltr'
});
// 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
},
direction: $('html').attr('dir') == 'rtl' ? 'rtl' : 'ltr'
});
// 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
},
direction: $('html').attr('dir') == 'rtl' ? 'rtl' : 'ltr'
});
// 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
},
direction: $('html').attr('dir') == 'rtl' ? 'rtl' : 'ltr'
});
//
// 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
},
direction: $('html').attr('dir') == 'rtl' ? 'rtl' : 'ltr'
});
// 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
},
direction: $('html').attr('dir') == 'rtl' ? 'rtl' : 'ltr'
});
//
// 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
},
direction: $('html').attr('dir') == 'rtl' ? 'rtl' : 'ltr'
});
// 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
},
direction: $('html').attr('dir') == 'rtl' ? 'rtl' : 'ltr'
});
//
// 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
},
direction: $('html').attr('dir') == 'rtl' ? 'rtl' : 'ltr'
}
// 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'),
solid_size1 = document.getElementById('slider-solid-lg'),
solid_size2 = document.getElementById('slider-solid-md'),
solid_size3 = document.getElementById('slider-solid-sm'),
white_size1 = document.getElementById('slider-white-lg'),
white_size2 = document.getElementById('slider-white-md'),
white_size3 = document.getElementById('slider-white-sm');
// Create sliders
noUiSlider.create(default_size1, color_options);
noUiSlider.create(default_size2, color_options);
noUiSlider.create(default_size3, color_options);
noUiSlider.create(solid_size1, color_options);
noUiSlider.create(solid_size2, color_options);
noUiSlider.create(solid_size3, color_options);
noUiSlider.create(white_size1, color_options);
noUiSlider.create(white_size2, color_options);
noUiSlider.create(white_size3, color_options);
};
//
// Return objects assigned to module
//
return {
init: function() {
_componentNouiSlider();
}
}
}();
// Initialize module
// ------------------------------
document.addEventListener('DOMContentLoaded', function() {
NouiSlider.init();
});