JSFiddle

  • 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 ...
  • 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 ...
  • ion.rangeSlider test playground #1 is the latest revision

    With html5 skin

    var $range = $(".js-range-slider");
    
    $range.ionRangeSlider({
        type: "single",
        min: 1e+21,
        max: 1e+22
    });
  • ion.rangeSlider test playground #3 is the latest revision

    With html5 skin

    var $range = $(".js-range-slider");
    
    $range.ionRangeSlider({
        type: "single",
        values: ["A", "B", "C"],
        from: 1,
        onChange: function(data) {
            console.log(data.from_value);
        }
    });
    
  • ion.rangeSlider test playground

    With html5 skin

    var $range = $(".js-range-slider");
    
    $range.ionRangeSlider({
        type: "single",
        values: ["A", "B", "C"],
        from: 1
    });
  • ion.rangeSlider test playground #2 is the latest revision

    With html5 skin

    moment.locale("en-GB");
    
    var $range = $(".js-range-slider");
    
    $range.ionRangeSlider({
        type: "single",
        grid: true,
        min: 0,
        max: 7200,
        from: 3000,
        prettify: function ...
  • ion.rangeSlider test playground #2 is the latest revision

    With html5 skin

    var $range = $(".js-range-slider");
    
    $range.ionRangeSlider({
        type: "single",
        min: 0,
        from: 5,
        max: 10,
        grid: true,
        prettify: function (n) {
        	if (n ...
  • ion.rangeSlider test playground

    With html5 skin

    var $range = $(".js-range-slider");
    
    $range.ionRangeSlider({
        type: "double",
        min: 100000,
        max: 1000000,
        postfix: " USD",
        grid: true,
        prettify_separator: ","
    });
  • irs - 2 connected

    jQuery (edge), HTML, CSS, JavaScript

    var $range = $(".js-range-slider"),
    	$btn = $(".js-range-toggle"),
        disabled = true,
        range_instance;
    
    $range.ionRangeSlider({
        type: "single",
        min: 100,
        max: 1000,
        from: 500,
        disable: disabled ...
  • ion.rangeSlider test playground

    With html5 skin

    var $range = $(".js-range-slider");
    
    $range.ionRangeSlider({
        type: "single",
        min: 0,
        max: 1000,
        prettify: function (n) {
        	if (n === 1000) {
            	return "unlimited";
            } else ...