Can't get rangeslider.js to work

Question

I am trying to use the rangeslider jQuery plugin: http://andreruffert.github.io/rangeslider.js/

However, it doesn't seem to work. What am I doing wrong?

<input
    type="range"
    min="10"                    // default 0
    max="1000"                  // default 100
    step="10"                   // default 1
    value="300"                 // default min + (max-min)/2
    data-orientation="vertical" // default horizontal
>

$( document ).ready(function() {
    $('input[type="range"]').rangeslider();
});

Jsfiddle: http://jsfiddle.net/8n2ckkmr/

Use [this link](https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.0.5/rangeslider.min.js) instead of the CDN collection [link](https://cdnjs.com/libraries/rangeslider.js) in your JSFiddle external resources **[corrected fiddle](http://jsfiddle.net/rwachtler/y471r2t4/)** — Ramiz Wachtler, Dec 01 '15 at 08:32
Thanks. I was expecting the slider to have the same design as the examples: http://andreruffert.github.io/rangeslider.js/ Would that just be css-styling then? Thought it was default and it doesnt seem like I can target the handle and stuff using css.. — user2806026, Dec 01 '15 at 08:38

Luke Snowden · Answer 1 · 2016-09-22T15:54:58.617

76

The actual answer is down to the polyfill option;

Feature detection the default is true. Set this to false if you want to use the polyfill also in Browsers which support the native <input type="range"> element.

Heres an easy way to get started:

$('input[type="range"]').rangeslider({
    polyfill : false,
    onInit : function() {
        this.output = $( '<div class="range-output" />' ).insertAfter( this.$range ).html( this.$element.val() );
    },
    onSlide : function( position, value ) {
        this.output.html( value );
    }
});

edited Sep 22 '16 at 15:54

answered May 27 '16 at 11:06

Luke Snowden

4,056
2
37
70

1

Exactly what I needed to see when I needed to see it. – manlikeangus Jun 27 '16 at 14:20
12

the developer should add `polyfill: false` gotcha in his docs. I just wasted 2 hours fixing everything in the html page before ending up here. – palerdot Sep 16 '16 at 16:26
2

tell me about, thats why I added the answer. The docs are poorly written and easy to miss the reason why it wasn't working – Luke Snowden Sep 17 '16 at 12:37
Didn't work for me - all I see rendered on the screen is this "1" - `
1
` – Reinderien Jun 20 '19 at 23:19
This is a specific issue for yourself then, create a new issue and send me the SO url and ill take a look – Luke Snowden Jun 21 '19 at 12:37

score 1 · Answer 2 · edited Nov 28 '18 at 11:02

1

What have I learned is that <input> needs to have also attribute [role="input-range"] for this to work:

<input type="range" min="1" max="100" value="10" role="input-range">

$('input[type="range"]').rangeslider({
  polyfill: false
});

edited Nov 28 '18 at 11:02

Yaseen Ahmad

1,807
5
25
43

answered Jun 28 '18 at 07:44

Mentori

426
4
10

score 0 · Answer 3 · answered Oct 20 '17 at 08:15

It worked for me also, but only on document ready

 $(document).ready(function() {
        $('[role="range"]').rangeslider({
            polyfill : false,
            onInit : function() {
                this.output = $( '[role="input-range"]' ).html( this.$element.val() );
            },
            onSlide : function( position, value ) {
                this.output.html( value );
            }
        });
    });

score 0 · Answer 4 · answered Aug 26 '19 at 15:31

<input type="range" min="10" max="1000" step="10" value="300" />
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/js/rangeslider.js" asp-append-version="true"></script>
<script>
    $('input[type="range"]').rangeslider({
       polyfill: false,
       onInit: function () {
           this.output = $('<div class="range-output" 
           />').insertAfter(this.$range).html(this.$element.val());
            },
            onSlide: function (position, value) {
                this.output.html(value);
            }
        });</script>

score 0 · Answer 5 · answered Apr 21 '20 at 07:44

0

make sure to have the correct path to the js files and dont forget to add rangeslider.css within your page

answered Apr 21 '20 at 07:44

Keusta

11
4

Can't get rangeslider.js to work

5 Answers5