JSFiddle

  • ion.rangeSlider test playground

    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 ...
  • ion.rangeSlider test playground

    With html5 skin

    var $range = $(".js-range-slider");
    var max = 1000;
    
    $range.ionRangeSlider({
        type: "single",
        min: 100,
        max: max,
        from: 300,
        prettify: function (n) {
        	if ...
  • ion.rangeSlider test playground

    With html5 skin

    var $range = $(".js-range-slider");
    var max = 1000;
    
    $range.ionRangeSlider({
        type: "single",
        min: 100,
        max: max,
        from: 300,
        onFinish: function (data) {
    		var ...
  • ion.rangeSlider test playground

    jQuery (edge), HTML, CSS, JavaScript

    var $range = $(".js-range-slider");
    var $result = $(".js-result");
    
    function transform (n) {
    	if (n > 15) {
        	return "15+";
        }
        
        return n;
    }
    
    $range.ionRangeSlider({
        type: "single ...
  • ion.rangeSlider test playground #1 is the latest revision

    jQuery (edge), HTML, CSS, JavaScript

    var $range = $(".js-range-slider");
    var $result = $(".js-result");
    
    var values = [0, 100, 200, 300, 999];
    var values_p = ["on the beach", "100m", "200m ...
  • ion.rangeSlider test playground

    With html5 skin

    var $range = $(".js-range-slider");
    var label;
    
    
    function Label (container) {
    	this.$label = $(container).find(".irs-single");
        this.active = false;
        this.ACTIVE = "irs-single--active";
    }
    
    Label ...
  • 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

    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 #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 ...