slider element. Check out the examples. Touchscreen friendly " /> slider element. Check out the examples. Touchscreen friendly " /> slider element. Check out the examples. Touchscreen friendly "/>

🎚 HTML5 input range slider element polyfill

Overview

rangeslider.js

Build Status npm version jsDelivr Hits npm downloads

Simple, small and fast jQuery polyfill for the HTML5 <input type="range"> slider element.

Check out the examples.

  • Touchscreen friendly
  • Recalculates onresize so suitable for use within responsive designs
  • Small and fast
  • Supports all major browsers including IE8+

Install

📦 : npm install --save rangeslider.js

Further Reading

Related

License

MIT © André Ruffert

rangeslider.js Gitter JS.ORG

Comments
  • Remove jQuery dependency

    Remove jQuery dependency

    It should mostly be backwards-compatible, but there are some breaking changes:

    • No IE 8 support: Although I haven't tested it yet, IE 9 should still work.
    • No "programmatic value changes": There's just no way to detect el.value changes on an element. If you want to change the handle position, you'll have to call the setPosition method for now.

    I haven't touched any of the actual calculations or styling parts for this pull request, but I think parts of them could be improved:

    • Use CSS transformations instead of left and width to update the handle and fill elements
    • Use requestAnimationFrame to throttle resize and *move events
    • Cache some stuff like getBoundingClientRect etc.
    • Not really sure about the difference between getPositionFromNode (internal) and getBoundingClientRect, but as far as I have seen it's more or less the same. Using only the latter, we could save some bytes and also tweak performance. EDIT: What is this part good for, anyway? I temporarily removed it and everything worked just fine. If we get rid of that part, we could also remove the getPositionFromNode function.
    • Use % values instead of px values to position the handle. That way, you could, among other things, call the window resize event much less often.

    Also, if this doesn't get merged, it's no big deal. I needed a small input type="range" "polyfill", anyway.

    Resolves #175

    opened by mrksbnch 15
  • Dynamically Updating Min / Max Values

    Dynamically Updating Min / Max Values

    I can dynamically change the value of an input, but not the min or max attributes and have it adjust the slider? Thoughts on how this could be achieved?

    Use Case: I'm making a media player with a timeline that changes from video to video in a playlist. The total duration (the max) changes between videos.

    opened by hergaiety 12
  • Vertical range?

    Vertical range?

    This looks like a great polyfill/plugin but I need to use it for vertical range's too (volume control in a video player. Is this something you're considering?

    type: feature 
    opened by ghost 12
  • Cannot get this to work at all!

    Cannot get this to work at all!

    I have inserted the js files: `

     

    and the javascript example with options:jQuery('input[type="range"]').rangeslider({ polyfill: true, // Default CSS classes rangeClass: 'rangeslider', disabledClass: 'rangeslider--disabled', horizontalClass: 'rangeslider--horizontal', verticalClass: 'rangeslider--vertical', fillClass: 'rangeslider__fill', handleClass: 'rangeslider__handle', // Callback function onInit: function() {}, // Callback function onSlide: function(position, value) {}, // Callback function onSlideEnd: function(position, value) {} });`

    It does not do anything to my rangeslider at all `
    <input type="range" min=0 max=100 step="1" value=50 data-orientation='horizontal'   | >

    `

    Q&A 
    opened by rbuelund 10
  • default value calculation error

    default value calculation error

    I have used rangeslider and as per the documentation, the value is set to default by min + (max-min)/2; However if I have min=100, max=350, as per this calculation it should have set 225 but my slider having 230?

    100 + (350-100)/2 => 100 + 125 => 225

    I tried to apply ceil/round etc but I could not fin how range slider got this value of 230?

    Q&A 
    opened by grajendran-cricut 8
  • User select IE < 10

    User select IE < 10

    Have a look at the plugins homepage in IE9 or IE8. Let's take the example "Orientation support" as an example. Slide the range to the top edge or bottom edge. You can see that this will select surrounding elements.

    eg Now you'll probably say

    grumpy-cat-8141_preview_zps9177ab07

    well, it's true. I for example use the rangeslider as a video player volume control. If I slide to the edges the video gets selected. This is a very bad UX. Using user-select:none; will not work because it's only supported in IE >= 10.

    type: fix 
    opened by julmot 8
  • Chaning the value programmatically doesn't work

    Chaning the value programmatically doesn't work

    In the onInit method I'm calling the following peace of code

    $slider.parent().find('input[type=range]').val($sliderVal['slider']).change();
    

    However, the ranger is not chaning it's value.

    /// This returns 1, so it should work
    $slider.parent().find('input[type=range]').length 
    // This returns 20 (not "20", simply 20)
    console.log($sliderVal['slider']);
    
    Q&A 
    opened by kobelobster 8
  • Impossible to set max='0'

    Impossible to set max='0'

    It's impossible to set a max to 0 for now

    this.max        = parseFloat(this.$element[0].getAttribute('max')) || 100;
    

    0 is false, so it goes to 100 by default.

    type: fix 
    opened by gmajoulet 8
  • Can't get it to work!

    Can't get it to work!

    Hi I am a bit of a newbie at web development and I would love to use rangeslider.js in my Masters thesis project. I have downloaded the latest version, installed with Bower via the terminal and linked everything up, I have also changed the setting for the polyfill to false, as shown in previous issues. Despite all of this I can't get it to work and I am probably doing something basic and stupid wrong but I can't find anyone on Stack Overflow or anywhere else that is willing/capable to help. Here is my code, if at all useful:

    HTML:

    <html>
      <head>
        <link href="rangeslider/rangeslider.css" rel="stylesheet">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="rangeslider/rangeslider.min.js"></script>
      </head>
      <body>
          <input type="range" id="ranger" min="0" max="99"/>
          <div id="demo" style="color: black;"></div>
      </body>
    </html>
    

    jQuery: $(document).ready(function(){ $('input[type="range"]').rangeslider({ polyfill: false, }); });

    Thank you for your help, Brian

    Q&A 
    opened by BGGrieco 7
  • Programmatically restrain sliding

    Programmatically restrain sliding

    I have a situation where several sliders are interdependent, so that one defines a minimum for the other which it can not go below. However, I do not want to restrain the actual min value of the slider and thus change the range, I'd just like to not move the slider handle beyond the programmatically restrained minimum.

    Q&A 
    opened by kontur 7
  • Position when body != window

    Position when body != window

    It may have been a poor choice when I elected to give my body a width less than that of the window, but Its too late to turn back now.

    It seems that range slider is calculating mouse position relative to the window but is positioning the handle relative to the body, meaning whenever my window is wider than 1190 in this case, the output value (and handle placement) are off by the difference between my body element edge and the wind edge.

    I tried changing this.$window = $(window); to this.$window = $("body"); - but no luck there.

    Any guesses?

    type: feature 
    opened by matthornsby 7
  • Programmatic attribute changes do not reset the initial value

    Programmatic attribute changes do not reset the initial value

    If I change the min from 100 to 1000. The output value under the line still stands on 100. Do not matter if the new value is smaller or bigger than the old value.

    opened by mvggitacc 0
  • rangeSlider initialize issue

    rangeSlider initialize issue

    Hello!

    I'm running a form that has hidden steps and all the rangeslider fields are within hidden steps.

    This seems to cause issues. The slider initiates, but the slider looks something like this:

    image

    It only seems to go between the min value and the max value in 1 step, within that little space at the begging, rather than spanning the full width of the bar.

    This is how I'm currently initiating it:

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

    Any help would be much appreciated!

    opened by ste-haw 0
  • Slider UI issue with Kendo Extend

    Slider UI issue with Kendo Extend

    Hi, I have a project working fine in every condition, but when i set the display: none for rangeslider Div and then use kendo extend minimize and extend back to original position but after setting display:block for rangeslider its UI slider breaks (thumb doesn't move any side).

    But when i Debug the Issue, the slider works perfectly.

    Thanks for the any help you can provide.

    opened by AbTnk 0
  • programmatic value changes input null

    programmatic value changes input null

    I read this https://codepen.io/andreruffert/pen/vOVygB

    but After I type the input number, when deleting values from the input, is the number It automatically changes to the value of min + max / 2. I'm going to erase this whole value. I want to erase this whole value. What should I do?

    opened by min6624 2
Releases(2.3.2)
A jquery UI range selection slider that supports dates

jQRangeSlider, jQDateRangeSlider & jQEditRangeSlider A javascript slider selector that supports dates and touch devices Home page Documentation Suppor

Guillaume Gautreau 676 Sep 24, 2022
noUiSlider is a lightweight JavaScript range slider library with full multi-touch support. It fits wonderfully in responsive designs and has no dependencies.

noUiSlider noUiSlider is a lightweight JavaScript range slider. No dependencies All modern browsers and IE > 9 are supported Fully responsive Multi-to

Léon Gersen 5.4k Dec 28, 2022
Swiffy-slider - Super fast carousel and slider with touch for optimized websites running in modern browsers.

Swiffy Slider Super fast lightweight carousel and slider with touch for optimized websites running in modern browsers. Explore Swiffy Slider docs » Se

Dynamicweb Software A/S 149 Dec 28, 2022
Most modern mobile touch slider with hardware accelerated transitions

Get Started | Documentation | Demos Swiper Swiper - is the free and most modern mobile touch slider with hardware accelerated transitions and amazing

Vladimir Kharlampidi 33.7k Jan 9, 2023
An awesome, fully responsive jQuery slider plugin

FlexSlider 2.7.2 http://www.woocommerce.com/flexslider/ - Copyright (c) 2015 WooThemes Releases The master branch of this repository is always the lat

WooCommerce 4.9k Jan 3, 2023
:snowboarder: A responsive slider jQuery plugin with CSS animations

A responsive slider jQuery plugin with CSS animations Animations from animate.css Online demo Visit plugin website. Appszoom for developers also uses

Joan Claret 58 Dec 12, 2022
A jQuery plugin for a slider with adaptive colored figcaption and navigation.

Adaptive Slider jQuery Plugin A jQuery plugin for a slider with adaptive colored figcaption and navigation. This plugin will take a list of figure ele

null 53 Jan 3, 2023
A dependency-free JavaScript ES6 slider and carousel. It’s lightweight, flexible and fast. Designed to slide. No less, no more

Glide.js is a dependency-free JavaScript ES6 slider and carousel. It’s lightweight, flexible and fast. Designed to slide. No less, no more What can co

null 6.7k Jan 7, 2023
OlumSlider is a lightweight and flexible slider, written via vanilla js

olum-slider OlumSlider is a lightweight and flexible slider, written via vanilla js Documentation CDN <!DOCTYPE html> <html lang="en"> <head> <t

Olumjs 0 Oct 8, 2021
Jquery-anyimagecomparisonslider-plugin - The any Image Comparison Slider is an extremely versatile yet slim slider for comparing images. You have a lot of options to configure the slider and it works just about everywhere.

any Image Comparison Slider (jquery-anyimagecomparisonslider-plugin ) Description The any Image Comparison Slider is an extremely versatile yet slim s

Niklas 6 Sep 12, 2022
Pure JavaScript HTML5 Canvas Range Slider. No stylesheet needed. Simple, elegant and powerful. A quirky alternative to other sliders.

CanvasSlider CanvasSlider is a lightweight JavaScript range slider. Most of the range slider controls use Javascript and a stylesheet. This slider use

null 7 Aug 15, 2022
A lightweight (~2kB) library to create range sliders that can capture a value or a range of values with one or two drag handles

range-slider-input A lightweight (~2kB) library to create range sliders that can capture a value or a range of values with one or two drag handles. Ex

Utkarsh Verma 42 Dec 24, 2022
Generate release notes from git commit history either commit range or tag range.

Would you like to support me? Release Notes Generate release notes from git commit history either commit range or tag range. App Store Template Change

Numan 6 Oct 8, 2022
jQuery only range slider

Ion.RangeSlider. Is an easy, flexible and responsive range slider with tons of options. Version: 2.3.1 | Version 3.x is under development now Project

Denis Ineshin 2.5k Dec 25, 2022
A jquery UI range selection slider that supports dates

jQRangeSlider, jQDateRangeSlider & jQEditRangeSlider A javascript slider selector that supports dates and touch devices Home page Documentation Suppor

Guillaume Gautreau 676 Sep 24, 2022
noUiSlider is a lightweight JavaScript range slider library with full multi-touch support. It fits wonderfully in responsive designs and has no dependencies.

noUiSlider noUiSlider is a lightweight JavaScript range slider. No dependencies All modern browsers and IE > 9 are supported Fully responsive Multi-to

Léon Gersen 5.4k Dec 28, 2022
Tool Cool Range Slider

Responsive range slider library written in typescript and using web component technologies. Pure JavaScript without additional dependencies. It has a rich set of settings, including a vertical slider, touch, mousewheel and keyboard support, local and session storage, and RTL support.

Tool Cool 23 Dec 31, 2022
Nivo Slider - The Most Awesome jQuery Image Slider

Maintainer's Wanted! - Ineterested in contributing regularly to Nivo Slider development? Get in touch Nivo Slider The Nivo Slider is world renowned as

Verti Studio 1.2k Dec 24, 2022
Swiffy-slider - Super fast carousel and slider with touch for optimized websites running in modern browsers.

Swiffy Slider Super fast lightweight carousel and slider with touch for optimized websites running in modern browsers. Explore Swiffy Slider docs » Se

Dynamicweb Software A/S 149 Dec 28, 2022
Accordion Slider is a jQuery plugin that combines the functionality of a slider with that of an accordion.

Accordion Slider - jQuery slider plugin A responsive and touch-enabled jQuery accordion slider plugin that combines the functionality of a slider with

null 0 Dec 29, 2022