JSFiddle

  • irs - 2 connected #9 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

    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

    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 #4 is the latest revision

    With html5 skin

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

    With html5 skin

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

    With html5 skin

    var $range = $(".js-range-slider");
    
    $range.ionRangeSlider({
        type: "single",
        min: 0,
        max: 100,
        step: 10,
        grid: true,
        grid_num: 2,
        prettify: function (num ...