JSFiddle

  • ion.rangeSlider test playground

    jQuery (edge), HTML, CSS, JavaScript

    var $range = $(".js-range-slider");
    var $result = $(".js-result");
    
    function transform(num) {
        var n = num.toString();
        return n.replace(/(\d{1,3}(?=(?:\d ...
  • ion.rangeSlider test playground #1 is the latest revision

    With html5 skin

    var $range = $(".js-range-slider");
    var gaps = [10, 20, 30, 40, 50, 60, 70, 80, 90];
    var $debug = $(".js-debug");
    
    function transform(num ...
  • irs - 2 connected #13 is the latest revision

    jQuery (edge), HTML, CSS, JavaScript

    var $range1 = $(".js-range-slider-1");
    var $range2 = $(".js-range-slider-2");
    var range_instance_1;
    var range_instance_2;
    var v1 = 0;
    var v2 = 0;
    var total = 100;
    
    $range1 ...
  • ion.rangeSlider test playground #33 is the latest revision

    jQuery (edge), HTML, CSS, JavaScript

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

    jQuery (edge), HTML, CSS, JavaScript

    var $range = $(".js-range-slider"),
        $btn_minus = $(".js-btn-minus"),
        $btn_plus = $(".js-btn-plus"),
        min = 100,
        max = 200,
        step = 10,
        from = 150;
    
    $range.ionRangeSlider({
        type: "single",
        min ...
  • ion.rangeSlider test playground

    With html5 skin

    var $range1 = $(".js-range-slider-1");
    var $range2 = $(".js-range-slider-2");
    
    $range1.ionRangeSlider({
        type: "single",
        min: 1.2,
        max: 2.2,
        step: 0.1,
        from ...
  • ion.rangeSlider test playground

    With html5 skin

    var $range = $(".js-range-slider");
    
    $range.ionRangeSlider({
        type: 'double',
        min: 2010,
        max: 2017,
        from: 2010,
        to: 2017,
        grid: true,
        grid_num: 7,
        force_edges ...
  • ion.rangeSlider test playground

    With html5 skin

    var $range = $(".js-range-slider");
    
    $range.ionRangeSlider({
        type: "double",
        grid_snap: true,  // This line crashes the browser
        grid: true,
        min: 0,
        max: 80000 ...
  • ion.rangeSlider test playground #3 is the latest revision

    With html5 skin

    var $range = $(".js-range-slider");
    
    $range.ionRangeSlider({
        type: "double",
        grid_snap: true,  // This line crashes the browser
        grid: true,
        min: 0,
        max: 80 ...
  • ion.rangeSlider test playground #26 is the latest revision

    With html5 skin

    var $range = $(".js-range-slider");
    
    $range.ionRangeSlider({
        type: "single",
        min: 0,
        max: 100,
        from: 50
    });