JSFiddle

  • ion.rangeSlider test playground

    jQuery (edge), HTML, CSS, JavaScript

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

    jQuery (edge), HTML, CSS, JavaScript

    var $range = $(".js-range-slider"),
        $debug = $("#debug");
    
    $range.ionRangeSlider({
        type: "double",
        min: 100,
        max: 1000,
        from: 300,
        to: 800
    });
    
    $range.on("change ...
  • ion.rangeSlider test playground #57 is the latest revision

    jQuery (edge), HTML, CSS, JavaScript

    var $range = $(".js-range-slider");
    
    $range.ionRangeSlider({
        type: "double",
        min: 100,
        max: 1000,
        from: 300,
        to: 800
    });
  • IRS - get values range

    jQuery (edge), HTML, CSS, JavaScript

    var $range = $(".js-range-slider"),
        $debug = $("#debug"),
        values = ["A", "B", "C", "D", "E", "F", "G", "I", "K", "L"];
    
    var showRange = function (data ...
  • IRS - 2 connected with restriction #7 is the latest revision

    Not more than 100

    var $range1 = $(".js-range-slider-1"),
        $range2 = $(".js-range-slider-2"),
        first,
        second;
    
    $range1.ionRangeSlider({
        type: "single",
        min: 0,
        max: 100,
        from: 50,
        from_max: 50,
        from_shadow ...
  • IRS - 3 connected sliders #10 is the latest revision

    Each slider update others

    var $range1 = $(".js-range-slider-1"),
        $range2 = $(".js-range-slider-2"),
        $range3 = $(".js-range-slider-3"),
        s1, s2, s3;
    
    $range1.ionRangeSlider({
        type: "single",
        min: 0,
        max: 100,
        from: 50 ...
  • IRS - sum of 2 sliders #7 is the latest revision

    Connect 2 sliders and calc sum of their values

    var $range1 = $(".js-range-slider-1"),
        $range2 = $(".js-range-slider-2"),
        $result = $(".js-result"),
        v1 = 0,
        v2 = 0;
    
    var calc = function (data) {
        var res;
        
        res = v1 + " + " + v2 ...
  • ion.rangeSlider test playground #5 is the latest revision

    jQuery (edge), HTML, CSS, JavaScript

    var $range = $(".js-range-slider"),
        $btn = $("#get_value");
    
    $range.ionRangeSlider({
        type: "single",
        min: 100,
        max: 1000,
        from: 550
    });
    
    $btn.on("click", function () {
        var ...
  • ion.rangeSlider test playground #38 is the latest revision

    jQuery (edge), HTML, CSS, JavaScript

    var $range = $(".js-range-slider"),
        $result = $(".js-result"),
        $getvalues = $(".js-get-values"),
        
        from = 0,
        to = 0;
    
    var saveResult = function (data) {
        from = data.from;
        to = data ...
  • ion.rangeSlider test playground

    jQuery (edge), HTML, CSS, JavaScript

    var $continer = $('.js-container'),
        $range = $(".js-range-slider");
    
    var hide = function (obj) {
        if (obj.from === 0) {
            $continer.addClass("hidden");
        }
    };
    
    $range.ionRangeSlider({
        type: "single ...