JSFiddle

  • ion.rangeSlider test playground

    jQuery (edge), HTML, CSS, JavaScript

    var $range = $(".js-range-slider");
    
    $range.ionRangeSlider({
        type: "double",
        min: 4.75,
        max: 100,
        from: 4.75,
        to: 100,
        step: 0.01 ...
  • ion.rangeSlider test playground

    jQuery (edge), HTML, CSS, JavaScript

    var $range = $(".js-range-slider");
    
    $range.ionRangeSlider({
        type: "single",
        values: ["foo", "bar", "baz"],
        grid: true,
        onFinish: function (data) {
        	if (data.from_value === "baz ...
  • ion.rangeSlider test playground #3 is the latest revision

    jQuery (edge), HTML, CSS, JavaScript

    var $range = $(".js-range-slider");
    
    $range.ionRangeSlider({
        type: "double",
        min: 1000,
        max: 10000,
        from: 2000,
        to: 9000,
        hide_min_max: true,
        force_edges: true
    });
    
  • ion.rangeSlider test playground

    jQuery (edge), HTML, CSS, JavaScript

    var $range = $(".js-range-slider");
    
    $range.ionRangeSlider({
        type: "double",
        min: 1000,
        max: 10000,
        from: 2000,
        to: 9000
    });
    
  • ion.rangeSlider test playground #1 is the latest revision

    With html5 skin

    var $range = $(".js-range-slider"),
        $input = $(".js-input"),
        instance,
        min = 0,
        max = 1000,
        first = true;
    
    $range.ionRangeSlider({
        type: "single",
        values: [1, 5, 25 ...
  • ion.rangeSlider test playground

    With html5 skin

    var $range = $(".js-range-slider"),
        $input = $(".js-input"),
        values = [1, 2, 5, 10, 25, 50, 100],
        instance;
    
    $range.ionRangeSlider({
        type: "single",
        values: values ...
  • ion.rangeSlider test playground

    With html5 skin

    var $range = $(".js-range-slider");
    
    $range.ionRangeSlider({
        type: "double",
        min: 100,
        max: 1000,
        from: 300,
        to: 800,
        grid: true,
        onStart: function (data ...
  • ion.rangeSlider test playground

    With html5 skin

    var $range = $(".js-range-slider");
    var min = 100;
    var max = 1000;
    var marks = [700, 900];
    
    $range.ionRangeSlider({
        type: "single",
        min: min,
        max ...
  • ion.rangeSlider test playground #2 is the latest revision

    jQuery (edge), HTML, CSS, JavaScript

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

    With html5 skin

    var $range = $(".js-range-slider");
    
    $range.ionRangeSlider({
        type: "single",
        min: 0,
        max: 100,
        from: 50
    });
    
    $(".irs-line").on("focusin", function () {
    	setFocus($(this));
    });
    
    $(".irs-line ...