stbaer/rangeslider-js

Lightweight rangeslider with touch support

rangeslider-js

Simple, fast and lightweight slider, touch friendly

Docs and Examples

• v1 was based on rangeslider.js, main differences:
  • no jQuery
  • raf to throttle window resize, transform to set the handle position
  • fewer and only basic styles
  • no vertical mode

Install

npm i rangeslider-js --save

Usage

<input id="slider1" type="range">

<input id="slider2" type="range" min="0" max="5" value="1" step="1">

import rangesliderJs from 'rangeslider-js'

// single, options via js 
rangesliderJs.create(document.getElementById('slider1'), {min:0, max: 1, value: 0.5, step: 0.1})

// or single, options via html attributes 
rangesliderJs.create(document.getElementById('slider2'))

// or initialize multiple
rangesliderJs.create(document.querySelectorAll('input[type="range"]'))

Options

{
    min: 0,
    max: 100,
    value: 50,
    step: 1,
    // callbacks
    onInit: (value, percent, position) => {},
    onSlideStart: (value, percent, position) => {},
    onSlide: (value, percent, position) => {},
    onSlideEnd: (value, percent, position) => {}
}

Events

Contribute or Report Issue

Pull requests should target the develop branch.

For bugs and feature requests, please create an issue.

Licence

MIT, see LICENSE.md for details.

rangeslider-js's Issues

[Intervention] Unable to preventDefault inside passive event listener

I tried the examples on http://stbaer.github.io/rangeslider-js/#/examples and had tested it with chrome mobile inspector console. This was the output on loading the page:

(index):3 Uncaught TypeError: rangesliderJs.create is not a function
at (index):3
(anonymous) @ (index):3
(index):3 Uncaught TypeError: rangesliderJs.create is not a function
at (index):3
(anonymous) @ (index):3
(index):3 Uncaught TypeError: rangesliderJs.create is not a function
at (index):3
(anonymous) @ (index):3
(index):5 Uncaught TypeError: rangesliderJs.create is not a function
at (index):5

The input:ranges was not being created successfully. Then I tried this:

temp1
<input id=​"slider" type=​"range" min=​"0" max=​"5" value=​"1" step=​"1">​

rangesliderJs.default.create(temp1)

And the result was that the input was converted with rangeslider correctly. But then I saw that the problem I found in my own project was happening also in the examples. On moving the range, this appeared on console:

rangeslider-js.min.js:1 [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080

Big filesize

The original rangeslider.js with jQuery is about half the filesize. I try to minimize my javascript filesize by using "plugins" that don't require jQuery. Often the vanilla js plugin is about the same size or smaller. Not in this case.

Is it possible to keep the same function but make it smaller?

How can i use it for es6

i like this plugin but i'm not able to use in my website

please help me :)

Feature request - Non-incremental steps

It would be handy if the steps could be a pre determined array.

When an array is provided it could just be 7 steps as below that go from point to point.

steps: [0, 5, 10, 25, 50, 100, 200]

Not working when vertical

When doing a vertical range (.rangeslider {transform: rotate(-90deg);}) it stops to work properly

CSS Injection (optional)

I see that your script automatically adds/injects the CSS, tho I'd like to write my SASS styling that I can reuse with ease for other projects with your module.

Is it possible that you make this as option, such as:

rangeSlider.create(selector, {
    injectStyle: false // default true
});

Although you could also simply separate styling from JS and don't inject it at all.
If there's a workaround let me know.

I did a simple demo in Codepen

https://codepen.io/qiansen1386/details/ZqxBXd/

Please give me some comments if your are free. 🙇‍♂️

Please update documentation Script Urls

The demo page is broken

Custom css classes?

The original library lets you override default classes:

{
    rangeClass: 'rangeslider',
    disabledClass: 'rangeslider--disabled',
    horizontalClass: 'rangeslider--horizontal',
    verticalClass: 'rangeslider--vertical',
    fillClass: 'rangeslider__fill',
    handleClass: 'rangeslider__handle'
}

Problem setting values with HTML

This issue I had before so it's not only the development branch.

HTML

<div class="slider">
    <input type="range" class="rangeslider" min="0" max="15" value="5" step="1" data-rangeslider>
</div>

JS code

Might be a little messy but when I uncomment what I have commented, it works. Now with the comments the slider function work but it does not get the slider values from the HTML. It says undefined.

My current solution is that I force the values to the JS. It works but it bloats the JS a little bit.

Maybe it's a bug, or maybe I just missed something.

document.addEventListener("DOMContentLoaded", function() {
    if( document.querySelector('.template-home') ) {
        var slider = document.querySelector('.slider');
        var max = document.querySelector('.rangeslider').getAttribute('max');
        var value = document.querySelector('.rangeslider').getAttribute('value');

        var slider_values = {};
        rangesliderJs.create(slider, {
            // callbacks
            /*min: 0,
            max: max,
            value: value,
            step: 1,*/
            onInit: function () {
                var json = get_array_from_data_json();
                var init_value = document.querySelector('.rangeslider').getAttribute('value');
                var init_price = json[init_value];

                document.querySelector('.rangeslider__handle').innerHTML = '<div class="value">' + init_price + ' kr</div>';
            },
            onSlideStart: function (value, percent, position) {
            },
            onSlide: function (value, percent, position) {
                var json = get_array_from_data_json();
                document.querySelector('.value').innerHTML = json[value] + ' kr';
            },
            onSlideEnd: function (value, percent, position) {
                console.log( 'END' + value + " " + position);

                var json = get_array_from_data_json();
                slider_values['belopp'] = json[value];

                ajax_callback( slider_values );
            }
        });
    }
});

Does not work correctly in RTL mode

Active state does not work in FF

Firefox ignore active state for some reason

.rangeslider__handle:active

i was try to find solution but looks it's not a problem with css, anyone have idea what is problem ?

Unable to preventDefault inside passive event listener due to target being treated as passive

The e.preventDefault() in RangeSlider._handleMove() throws an error on mobile devices chrome.

[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080

So far I can see it the logic still works but it's thrown every move in the browser console. Don't know if it somewhen will possibly throw a real error and break the code. So I think that it should be solved somehow.

On 20 May 2019 in #11 you've said that it should be fixed in latest release but I haven't found any commit in the history that has adjusted the named method since 4 years. 🧐

slider over-running range.

Hi, nice project. I'd like to use it but I don't think that I'll be able to due to the following issue.
I was wanting to use it in a full screen overlay used for mobile and tablets. It works but the handle over-runs the width of the the screen. This happens on a physical mobile and using dev tools. the element should be 100% of the container width which has a little padding on either side. This happens in chrome and FF. For instance, if the screen is 505px, looking at the element inspector shows that it goes up to 498.971px

However, this is off the screen, due to the padding on the container. I hope that the feedback was off some use.

Programmatic Change Example Doesn't Work

The last example isn't working.

Also, does this rely on jQuery?