JSFiddle

  • ion.rangeSlider test playground #1 is the latest revision

    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 ...
  • 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 #5 is the latest revision

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