JSFiddle

  • ion.rangeSlider test playground

    With html5 skin

    var $range = $(".js-range-slider");
    
    $range.ionRangeSlider({
        type: "single",
    	values: ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j"],
        grid: true
    });
  • ion.rangeSlider test playground #9 is the latest revision

    With html5 skin

    var $range = $(".js-range-slider");
    
    $range.ionRangeSlider({
        type: "single",
        min: 0,
        max: 1000,
        step: 100,
        from: 500,
        grid: true,
        grid_snap: true,
        prettify ...
  • ion.rangeSlider test playground #25 is the latest revision

    jQuery (edge), HTML, CSS, JavaScript

    var $range = $(".js-range-slider");
    
    $range.ionRangeSlider({
        type: "single",
        min: 1,
        max: 1000,
        from: 1,
        grid: true,
        grid_num: 15,
        prettify: function (n ...
  • ion.rangeSlider test playground

    jQuery (edge), HTML, CSS, JavaScript

    var $range = $(".js-range-slider");
    
    $range.ionRangeSlider({
        type: "single",
        min: 1,
        max: 25000000,
        from: 500,
        prettify: function(n) {
            if (n >= 1 && n <= 10000)
                return 500 * Math.round(n / 500);
            if ...
  • ion.rangeSlider test playground #46 is the latest revision

    jQuery (edge), HTML, CSS, JavaScript

    var $range = $(".js-range-slider");
    
    $range.ionRangeSlider({
        type: "single",
        min: 1,
        max: 100,
        from: 1,
        grid: true,
        grid_num: 15,
        prettify: function (n ...
  • ion.rangeSlider test playground #8 is the latest revision

    With html5 skin

    var $range = $(".js-range-slider");
    
    $range.ionRangeSlider({
        type: "single",
        min: 0,
        max: 10000,
        from: 0,
        grid: true,
        grid_num: 20,
        prettify: function (num ...
  • ion.rangeSlider test playground

    With html5 skin

    var $range = $(".js-range-slider");
    
    $range.ionRangeSlider({
        type: "single",
        grid: true,
        grid_snap: true,
        values: [0, 1, 2, "test", 3, 4, 5]
    });
  • ion.rangeSlider test playground #2 is the latest revision

    With html5 skin

    var $range = $(".js-range-slider");
    
    $range.ionRangeSlider({
        type: "single",
        min: 0,
        max: 5,
        from: 3,
        grid: true,
        grid_snap: true,
        prettify: function (num ...
  • ion.rangeSlider test playground

    With html5 skin

    var $range = $(".js-range-slider");
    
    function prettify (num) {
    	var n = num.toString().split(".");
        if (!n[1]) {
        	n[1] = "00";
        }
        if (n[1 ...
  • ion.rangeSlider test playground

    With html5 skin

    var $range = $(".js-range-slider"),
        $inputFrom = $(".js-input-from"),
        $inputTo = $(".js-input-to"),
        instance,
        min = 0,
        max = 1000,
        from = 0,
        to = 0;
    
    $range.ionRangeSlider({
        type: "double ...