Sliders - Flat UI Skin

Simple start and customising basic params

Start without params
$("#ion-range-slider-without-params").ionRangeSlider();
Set min value, max value and start point
$("#ion-range-slider-min-max-from").ionRangeSlider({
    min: 100,
    max: 1000,
    from: 550
});
Set type to double and specify range, also showing grid and adding prefix "$"
$("#ion-range-slider-double-grid").ionRangeSlider({
    type: "double",
    grid: true,
    min: 0,
    max: 1000,
    from: 200,
    to: 800,
    prefix: "$"
});

Set up range and step

Set up range with negative values
$("#ion-range-slider-range-nagative-values").ionRangeSlider({
    type: "double",
    grid: true,
    min: -1000,
    max: 1000,
    from: -500,
    to: 500
});
Using step 250
$("#ion-range-slider-range-using-step").ionRangeSlider({
    type: "double",
    grid: true,
    min: -1000,
    max: 1000,
    from: -500,
    to: 500,
    step: 250
});
Set up range with fractional values, using fractional step
$("#ion-range-slider-fractional-values-steps").ionRangeSlider({
    type: "double",
    grid: true,
    min: -12.8,
    max: 12.8,
    from: -3.2,
    to: 3.2,
    step: 0.1
});

Using custom values array

Set up you own numbers
$("#ion-range-slider-you-own-numbers").ionRangeSlider({
    type: "double",
    grid: true,
    from: 1,
    to: 5,
    values: [0, 10, 100, 1000, 10000, 100000, 1000000]
});
Set up you own numbers
$("#ion-range-slider-string-as-values").ionRangeSlider({
    grid: true,
    from: 5,
    values: [
        "zero", "one",
        "two", "three",
        "four", "five",
        "six", "seven",
        "eight", "nine",
        "ten"
    ]
});
One more example with strings
$("#ion-range-slider-months").ionRangeSlider({
    grid: true,
    from: 3,
    values: [
        "January", "February", "March",
        "April", "May", "June",
        "July", "August", "September",
        "October", "November", "December"
    ]
});

Prettify visual look of numbers

No prettify. Big numbers are ugly and unreadable
$("#ion-range-slider-no-prettify-numbers").ionRangeSlider({
    grid: true,
    min: 1000,
    max: 1000000,
    from: 100000,
    step: 1000,
    prettify_enabled: false
});
Prettify enabled. Much better!
$("#ion-range-slider-prettify-enabled").ionRangeSlider({
    grid: true,
    min: 1000,
    max: 1000000,
    from: 200000,
    step: 1000,
    prettify_enabled: true
});
Don't like space as separator? Use anything you like!
$("#ion-range-slider-prettify-no-space-separator").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!
$("#ion-range-slider-prettify-as-function").ionRangeSlider({
    grid: true,
    min: 1000,
    max: 1000000,
    from: 400000,
    step: 1000,
    prettify_enabled: true,
    prettify: function (num) {
        return (Math.random() * num).toFixed(0);
    }
});

Decorating numbers

Using prefixes
$("#ion-range-slider-prettify-using-prefix").ionRangeSlider({
    type: "double",
    grid: true,
    min: 0,
    max: 10000,
    from: 1000,
    step: 1000,
    prefix: "$"
});
Using postfix
$("#ion-range-slider-prettify-using-postfix").ionRangeSlider({
    type: "single",
    grid: true,
    min: -90,
    max: 90,
    from: 0,
    postfix: "°"
});
Max postfix
$("#ion-range-slider-prettify-max-postfix").ionRangeSlider({
    grid: true,
    min: 18,
    max: 70,
    from: 30,
    prefix: "Age ",
    max_postfix: "+"
});
Connect two values
$("#ion-range-slider-prettify-connect-two-values").ionRangeSlider({
    type: "double",
    min: 100,
    max: 200,
    from: 145,
    to: 155,
    prefix: "Weight: ",
    postfix: " million pounds",
    decorate_both: true
});
Remove double decoration
$("#ion-range-slider-prettify-remove-double-decoration").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 →
$("#ion-range-slider-prettify-use-values-separator").ionRangeSlider({
    type: "double",
    min: 100,
    max: 200,
    from: 148,
    to: 152,
    prefix: "Weight: ",
    postfix: " million pounds",
    values_separator: " → "
});
Layout Options