2024-10-10
This commit is contained in:
557
web/bsadmin/assets/js/lib/rangeSlider/rangeslider.init.js
Normal file
557
web/bsadmin/assets/js/lib/rangeSlider/rangeslider.init.js
Normal file
@@ -0,0 +1,557 @@
|
||||
$(function () {
|
||||
"use strict";
|
||||
// Start without params
|
||||
$("#range_01").ionRangeSlider();
|
||||
|
||||
|
||||
//Set min value, max value and start point
|
||||
$("#range_02").ionRangeSlider({
|
||||
min: 100,
|
||||
max: 1000,
|
||||
from: 550
|
||||
});
|
||||
|
||||
|
||||
|
||||
//Set type to double and specify range, also showing grid and adding prefix "$"
|
||||
|
||||
$("#range_03").ionRangeSlider({
|
||||
type: "double",
|
||||
grid: true,
|
||||
min: 0,
|
||||
max: 1000,
|
||||
from: 200,
|
||||
to: 800,
|
||||
prefix: "$"
|
||||
});
|
||||
|
||||
//Set up range with negative values
|
||||
$("#range_04").ionRangeSlider({
|
||||
type: "double",
|
||||
grid: true,
|
||||
min: -1000,
|
||||
max: 1000,
|
||||
from: -500,
|
||||
to: 500
|
||||
});
|
||||
|
||||
|
||||
//Using step 250
|
||||
$("#range_05").ionRangeSlider({
|
||||
type: "double",
|
||||
grid: true,
|
||||
min: -1000,
|
||||
max: 1000,
|
||||
from: -500,
|
||||
to: 500,
|
||||
step: 250
|
||||
});
|
||||
|
||||
//Set up range with fractional values, using fractional step
|
||||
$("#range_06").ionRangeSlider({
|
||||
type: "double",
|
||||
grid: true,
|
||||
min: -12.8,
|
||||
max: 12.8,
|
||||
from: -3.2,
|
||||
to: 3.2,
|
||||
step: 0.1
|
||||
});
|
||||
|
||||
|
||||
//Set up you own numbers
|
||||
$("#range_07").ionRangeSlider({
|
||||
type: "double",
|
||||
grid: true,
|
||||
from: 1,
|
||||
to: 5,
|
||||
values: [0, 10, 100, 1000, 10000, 100000, 1000000]
|
||||
});
|
||||
|
||||
|
||||
// Using any strings as your values
|
||||
$("#range_08").ionRangeSlider({
|
||||
grid: true,
|
||||
from: 5,
|
||||
values: [
|
||||
"zero", "one",
|
||||
"two", "three",
|
||||
"four", "five",
|
||||
"six", "seven",
|
||||
"eight", "nine",
|
||||
"ten"
|
||||
]
|
||||
});
|
||||
|
||||
|
||||
|
||||
//One more example with strings
|
||||
$("#range_09").ionRangeSlider({
|
||||
grid: true,
|
||||
from: 3,
|
||||
values: [
|
||||
"January", "February", "March",
|
||||
"April", "May", "June",
|
||||
"July", "August", "September",
|
||||
"October", "November", "December"
|
||||
]
|
||||
});
|
||||
|
||||
|
||||
//No prettify. Big numbers are ugly and unreadable
|
||||
$("#range_10").ionRangeSlider({
|
||||
grid: true,
|
||||
min: 1000,
|
||||
max: 1000000,
|
||||
from: 100000,
|
||||
step: 1000,
|
||||
prettify_enabled: false
|
||||
});
|
||||
|
||||
|
||||
//Prettify enabled. Much better!
|
||||
$("#range_11").ionRangeSlider({
|
||||
grid: true,
|
||||
min: 1000,
|
||||
max: 1000000,
|
||||
from: 200000,
|
||||
step: 1000,
|
||||
prettify_enabled: true
|
||||
});
|
||||
|
||||
|
||||
|
||||
//Don't like space as separator? Use anything you like!
|
||||
$("#range_12").ionRangeSlider({
|
||||
grid: true,
|
||||
min: 1000,
|
||||
max: 1000000,
|
||||
from: 300000,
|
||||
step: 1000,
|
||||
prettify_enabled: true,
|
||||
prettify_separator: "."
|
||||
});
|
||||
|
||||
|
||||
//You don't like default prettify function? Use your own!
|
||||
$("#range_13").ionRangeSlider({
|
||||
grid: true,
|
||||
min: 1000,
|
||||
max: 1000000,
|
||||
from: 400000,
|
||||
step: 1000,
|
||||
prettify_enabled: true,
|
||||
prettify: function (num) {
|
||||
return (Math.random() * num).toFixed(0);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
//Using prefixes
|
||||
$("#range_14").ionRangeSlider({
|
||||
type: "double",
|
||||
grid: true,
|
||||
min: 0,
|
||||
max: 10000,
|
||||
from: 1000,
|
||||
step: 9000,
|
||||
prefix: "$"
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
//Using postfixes
|
||||
$("#range_15").ionRangeSlider({
|
||||
type: "single",
|
||||
grid: true,
|
||||
min: -90,
|
||||
max: 90,
|
||||
from: 0,
|
||||
postfix: "°"
|
||||
});
|
||||
|
||||
|
||||
|
||||
//What to show that max number is not the biggest one?
|
||||
$("#range_16").ionRangeSlider({
|
||||
grid: true,
|
||||
min: 18,
|
||||
max: 70,
|
||||
from: 30,
|
||||
prefix: "Age ",
|
||||
max_postfix: "+"
|
||||
});
|
||||
|
||||
|
||||
//Taking care about how from and to values connect? Use decorate_both option:
|
||||
$("#range_17").ionRangeSlider({
|
||||
type: "double",
|
||||
min: 100,
|
||||
max: 200,
|
||||
from: 145,
|
||||
to: 155,
|
||||
prefix: "Weight: ",
|
||||
postfix: " million pounds",
|
||||
decorate_both: true
|
||||
});
|
||||
|
||||
|
||||
|
||||
//Remove double decoration
|
||||
$("#range_18").ionRangeSlider({
|
||||
type: "double",
|
||||
min: 100,
|
||||
max: 200,
|
||||
from: 145,
|
||||
to: 155,
|
||||
prefix: "Weight: ",
|
||||
postfix: " million pounds",
|
||||
decorate_both: false
|
||||
});
|
||||
|
||||
|
||||
|
||||
//Use your own separator symbol with values_separator option. Like →
|
||||
|
||||
$("#range_19").ionRangeSlider({
|
||||
type: "double",
|
||||
min: 100,
|
||||
max: 200,
|
||||
from: 148,
|
||||
to: 152,
|
||||
prefix: "Weight: ",
|
||||
postfix: " million pounds",
|
||||
values_separator: " → "
|
||||
});
|
||||
|
||||
|
||||
//Or " to ":
|
||||
$("#range_20").ionRangeSlider({
|
||||
type: "double",
|
||||
min: 100,
|
||||
max: 200,
|
||||
from: 148,
|
||||
to: 152,
|
||||
prefix: "Range: ",
|
||||
postfix: " light years",
|
||||
decorate_both: false,
|
||||
values_separator: " to "
|
||||
});
|
||||
|
||||
|
||||
|
||||
//You can disable all the sliders visual details, if you wish. Like this:
|
||||
|
||||
$("#range_21").ionRangeSlider({
|
||||
type: "double",
|
||||
min: 1000,
|
||||
max: 2000,
|
||||
from: 1200,
|
||||
to: 1800,
|
||||
hide_min_max: true,
|
||||
hide_from_to: true,
|
||||
grid: false
|
||||
});
|
||||
|
||||
|
||||
|
||||
//Or hide any part you wish
|
||||
$("#range_22").ionRangeSlider({
|
||||
type: "double",
|
||||
min: 1000,
|
||||
max: 2000,
|
||||
from: 1200,
|
||||
to: 1800,
|
||||
hide_min_max: true,
|
||||
hide_from_to: true,
|
||||
grid: true
|
||||
});
|
||||
|
||||
|
||||
|
||||
//And some more
|
||||
|
||||
$("#range_23").ionRangeSlider({
|
||||
type: "double",
|
||||
min: 1000,
|
||||
max: 2000,
|
||||
from: 1200,
|
||||
to: 1800,
|
||||
hide_min_max: false,
|
||||
hide_from_to: true,
|
||||
grid: false
|
||||
});
|
||||
|
||||
|
||||
//And some more
|
||||
$("#range_24").ionRangeSlider({
|
||||
type: "double",
|
||||
min: 1000,
|
||||
max: 2000,
|
||||
from: 1200,
|
||||
to: 1800,
|
||||
hide_min_max: true,
|
||||
hide_from_to: false,
|
||||
grid: false
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
$("#range_25").ionRangeSlider({
|
||||
type: "double",
|
||||
min: 1000000,
|
||||
max: 2000000,
|
||||
grid: true
|
||||
});
|
||||
|
||||
|
||||
|
||||
$("#range_26").ionRangeSlider({
|
||||
type: "double",
|
||||
min: 1000000,
|
||||
max: 2000000,
|
||||
grid: true,
|
||||
force_edges: true
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
$("#range_27").ionRangeSlider({
|
||||
type: "double",
|
||||
min: 0,
|
||||
max: 10000,
|
||||
grid: true
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
$("#range_28").ionRangeSlider({
|
||||
type: "double",
|
||||
min: 0,
|
||||
max: 10000,
|
||||
grid: true,
|
||||
grid_num: 10
|
||||
});
|
||||
|
||||
|
||||
|
||||
$("#range_29").ionRangeSlider({
|
||||
type: "double",
|
||||
min: 0,
|
||||
max: 10000,
|
||||
step: 500,
|
||||
grid: true,
|
||||
grid_snap: true
|
||||
});
|
||||
|
||||
|
||||
|
||||
$("#range_30").ionRangeSlider({
|
||||
type: "single",
|
||||
min: 0,
|
||||
max: 10,
|
||||
step: 2.34,
|
||||
grid: true,
|
||||
grid_snap: true
|
||||
});
|
||||
|
||||
|
||||
|
||||
$("#range_31").ionRangeSlider({
|
||||
type: "double",
|
||||
min: 0,
|
||||
max: 100,
|
||||
from: 30,
|
||||
to: 70,
|
||||
from_fixed: true
|
||||
});
|
||||
|
||||
|
||||
|
||||
$("#range_32").ionRangeSlider({
|
||||
type: "double",
|
||||
min: 0,
|
||||
max: 100,
|
||||
from: 30,
|
||||
to: 70,
|
||||
from_fixed: true,
|
||||
to_fixed: true
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
$("#range_33").ionRangeSlider({
|
||||
min: 0,
|
||||
max: 100,
|
||||
from: 30,
|
||||
from_min: 10,
|
||||
from_max: 50
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
$("#range_34").ionRangeSlider({
|
||||
min: 0,
|
||||
max: 100,
|
||||
from: 30,
|
||||
from_min: 10,
|
||||
from_max: 50,
|
||||
from_shadow: true
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
$("#range_35").ionRangeSlider({
|
||||
type: "double",
|
||||
min: 0,
|
||||
max: 100,
|
||||
from: 20,
|
||||
from_min: 10,
|
||||
from_max: 30,
|
||||
from_shadow: true,
|
||||
to: 80,
|
||||
to_min: 70,
|
||||
to_max: 90,
|
||||
to_shadow: true,
|
||||
grid: true,
|
||||
grid_num: 10
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
$("#range_36").ionRangeSlider({
|
||||
min: 0,
|
||||
max: 100,
|
||||
from: 30,
|
||||
disable: true
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
$("#range_37").ionRangeSlider({
|
||||
type: "double",
|
||||
min: 0,
|
||||
max: 100,
|
||||
from: 30,
|
||||
to: 70,
|
||||
keyboard: true
|
||||
});
|
||||
|
||||
|
||||
|
||||
$("#range_38").ionRangeSlider({
|
||||
type: "double",
|
||||
min: 0,
|
||||
max: 100,
|
||||
from: 30,
|
||||
to: 70,
|
||||
keyboard: true,
|
||||
keyboard_step: 20
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
$("#range_39").ionRangeSlider({
|
||||
min: +moment().subtract(1, "years").format("X"),
|
||||
max: +moment().format("X"),
|
||||
from: +moment().subtract(6, "months").format("X"),
|
||||
prettify: function (num) {
|
||||
return moment(num, "X").format("LL");
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
$("#range_40").ionRangeSlider({
|
||||
min: +moment().subtract(12, "hours").format("X"),
|
||||
max: +moment().format("X"),
|
||||
from: +moment().subtract(6, "hours").format("X"),
|
||||
prettify: function (num) {
|
||||
return moment(num, "X").format("MMM Do, hh:mm A");
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
$("#range_41").ionRangeSlider({
|
||||
min: +moment().subtract(12, "hours").format("X"),
|
||||
max: +moment().format("X"),
|
||||
from: +moment().subtract(6, "hours").format("X"),
|
||||
grid: true,
|
||||
force_edges: true,
|
||||
prettify: function (num) {
|
||||
var m = moment(num, "X").locale("ru");
|
||||
return m.format("Do MMMM, HH:mm");
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
$("#range_42").ionRangeSlider({
|
||||
min: +moment().subtract(12, "hours").format("X"),
|
||||
max: +moment().format("X"),
|
||||
from: +moment().subtract(6, "hours").format("X"),
|
||||
grid: true,
|
||||
force_edges: true,
|
||||
prettify: function (num) {
|
||||
var m = moment(num, "X").locale("ja");
|
||||
return m.format("Do MMMM, LT");
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
$("#range_119").ionRangeSlider({
|
||||
type: "double",
|
||||
min: 0,
|
||||
max: 100,
|
||||
from: 38,
|
||||
to: 58,
|
||||
min_interval: 20
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
$("#range_120").ionRangeSlider({
|
||||
type: "double",
|
||||
min: 0,
|
||||
max: 100,
|
||||
from: 41,
|
||||
to: 91,
|
||||
max_interval: 50
|
||||
});
|
||||
|
||||
|
||||
|
||||
$("#range_121").ionRangeSlider({
|
||||
type: "double",
|
||||
min: 0,
|
||||
max: 100,
|
||||
from: 30,
|
||||
to: 70,
|
||||
drag_interval: true
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
});
|
||||
Reference in New Issue
Block a user