557 lines
9.9 KiB
JavaScript
557 lines
9.9 KiB
JavaScript
$(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
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}); |