Javascript range slider with input

How TO — Range Sliders

Learn how to create custom range sliders with CSS and JavaScript.

Default:

Square:

Round:

Image:

Creating a Range Slider

Step 1) Add HTML:

Example

Step 2) Add CSS:

Example

.slidecontainer <
width: 100%; /* Width of the outside container */
>

/* The slider itself */
.slider -webkit-appearance: none; /* Override default CSS styles */
appearance: none;
width: 100%; /* Full-width */
height: 25px; /* Specified height */
background: #d3d3d3; /* Grey background */
outline: none; /* Remove outline */
opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
-webkit-transition: .2s; /* 0.2 seconds transition on hover */
transition: opacity .2s;
>

/* Mouse-over effects */
.slider:hover opacity: 1; /* Fully shown on mouse-over */
>

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb -webkit-appearance: none; /* Override default look */
appearance: none;
width: 25px; /* Set a specific slider handle width */
height: 25px; /* Slider handle height */
background: #04AA6D; /* Green background */
cursor: pointer; /* Cursor on hover */
>

.slider::-moz-range-thumb width: 25px; /* Set a specific slider handle width */
height: 25px; /* Slider handle height */
background: #04AA6D; /* Green background */
cursor: pointer; /* Cursor on hover */
>

Step 3) Add JavaScript:

Create a dynamic range slider to display the current value, with JavaScript:

Example

var slider = document.getElementById(«myRange»);
var output = document.getElementById(«demo»);
output.innerHTML = slider.value; // Display the default slider value

// Update the current slider value (each time you drag the slider handle)
slider.oninput = function() output.innerHTML = this.value;
>

Round Slider

To create a round slider handle, use the border-radius property. Tip: Set the height of the slider to a different value than the slider thumbs if you want unequal heights (15px vs. 25px in this example):

Example

.slider <
-webkit-appearance: none;
width: 100%;
height: 15px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
>

.slider::-webkit-slider-thumb -webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #04AA6D;
cursor: pointer;
>

.slider::-moz-range-thumb width: 25px;
height: 25px;
border-radius: 50%;
background: #04AA6D;
cursor: pointer;
>

Slider Icon/Image

To create a slider handle icon/image, use the background property and insert an image url:

Example

.slider::-webkit-slider-thumb <
-webkit-appearance: none;
appearance: none;
width: 23px;
height: 24px;
border: 0;
background: url(‘contrasticon.png’);
cursor: pointer;
>

.slider::-moz-range-thumb width: 23px;
height: 25px;
border: 0;
background: url(‘contrasticon.png’);
cursor: pointer;
>

Источник

rangeslider.js

Simple, small and fast JavaScript/jQuery polyfill for the HTML5 slider element.

Features

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

API

The rangeslider.js API is compatible with the standard HTML input methods.

$('input[type="range"]').val(10).change();

Simply calling something like this will just work.

Installation

The easiest way to install the files is with Bower or npm.

bower install --save rangeslider.js

npm install --save rangeslider.js

rangeslider.js is also hosted on cdnjs and jsdelivr.

Download latest and greatest manually: rangeslider.js-2.3.0.zip

Usage

Using rangeslider.js is simple. Configuration over attributes.

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 >

 src="jquery.min.js">  src="rangeslider.min.js"> // Initialize a new plugin instance for all // e.g. $('input[type="range"]') elements. $('input[type="range"]').rangeslider(); // Destroy all plugin instances created from the // e.g. $('input[type="range"]') elements. $('input[type="range"]').rangeslider('destroy'); // Update all rangeslider instances for all // e.g. $('input[type="range"]') elements. // Usefull if you changed some attributes e.g. `min` or `max` etc. $('input[type="range"]').rangeslider('update', true); 

Options

$('input[type="range"]').rangeslider( // Feature detection the default is `true`. // Set this to `false` if you want to use // the polyfill also in Browsers which support // the native element. 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) <> >);

Источник

34 JavaScript Range Sliders

Collection of free vanilla JavaScript range slider code examples. Update of April 2020 collection. 24 new items.

Related Articles

Author

Links

Made with

About a code

Range

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

CSS Heat Map Slider Input

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Range Pills

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Range Slider

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Love Slider

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Range Input

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Custom Range Input

Custom range input with snapping values made with GSAP Draggable.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Custom Web Component — Range Slider

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Range Slider

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Custom Range Slider

Compatible browsers: Chrome, Edge, Opera, Safari

Author

Links

Made with

About a code

Wavy Numbers Gauge

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Neumorphic Ranges With a Ball Handle

Another fun neumorphic exploration.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Range Sliders With a Rolling Counter

Watch the digits roll into place as you adjust these range sliders.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Rubber Slider v2

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: nouislider.js, gsap.js

Author

Links

Made with

About a code

Range Slider Brightness

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Range Slider with Text

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Custom Range Slider with Values

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Rage Slider

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Unicycle Range Slider

A range input where a stick figure is on a unicycle whose wheel is the handle. Watch him peddle and the flag display the value as you drag the wheel left and right.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Slider with Fill and Configurable Tick Marks

A slider with track fill, configurable tick marks and min/max labels.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Rating Slider

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: gsap.js, draggable.js, morphsvgplugin.js, inertiaplugin.js

Author

Источник

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.

• High CSS customizability
• Touch and keyboard accessible
• Supports negative values
• Vertical orientation
• Small and fast
• Zero dependencies
• Supported by all major browsers
• Has a React component wrapper

⚠️ It is recommended that you upgrade from v1.x to v2.x! What’s new and what’s changed in v2.x?

Installation

npm install range-slider-input 

Import the rangeSlider constructor and the core CSS:

import rangeSlider from 'range-slider-input'; import 'range-slider-input/dist/style.css';

script src pl-s">https://cdn.jsdelivr.net/npm/range-slider-input@2.4/dist/rangeslider.umd.min.js">script>

script src pl-s">https://unpkg.com/range-slider-input@2">script>

The core CSS comes bundled with the jsDelivr and unpkg imports.

Usage

import rangeSlider from 'range-slider-input'; import 'range-slider-input/dist/style.css'; const rangeSliderElement = rangeSlider(element);

API

rangeSlider(element, options = <>)

Returns an object of functions that can be called to read or write the properties initially set by options .

Parameters

element

options

Object that specifies the characteristics of the range slider element with the following available properties:

A string value of any means that no stepping is implied, and any value is allowed (barring other constraints, such as min and max).

Usage: (value, userInteraction) => <>

Return value

Object of functions that can be called to read or write the properties initially set by the options parameter. Available functions:

min() , max() , step() , value() and orientation()

These are simple getter and setter functions. So, while calling these functions, if a parameter is supplied, the corresponding values will be set, and if a parameter is not supplied, the corresponding values will be returned. E.g. Calling step() will return the step value, and calling value([0, 0.5]) will set the lower and upper offsets to 0 and 0.5 respectively.

disabled() , rangeSlideDisabled()

The default parameter is set to true . So, if they are called without a parameter, they will set the corresponding values to true . Thus, calling disabled() or disabled(true) will set options.disabled = true and calling disabled(false) will set options.disabled = false .

thumbsDisabled()

The default parameter is set to [true, true] . So, if it is called without a parameter, it will disable both thumbs. Example uses:

// thumbs -> lower upper // ----- ----- thumbsDisabled() // disabled disabled thumbsDisabled(true) // disabled disabled thumbsDisabled(false) // enabled enabled thumbsDisabled([]) // enabled enabled thumbsDisabled([false]) // enabled enabled thumbsDisabled([true]) // disabled enabled thumbsDisabled([true, false]) // disabled enabled thumbsDisabled([false, true]) // enabled disabled thumbsDisabled([false, false]) // enabled enabled thumbsDisabled([true, true]) // disabled disabled

currentValueIndex()

Returns the index ( 0 for the lower value and 1 for the upper value) of the value which is currently being modified. Returns -1 when the slider is idle.

removeGlobalEventListeners()

Removes the global event listeners. It should be called when removing the range slider element from the DOM dynamically.

Elements

div class pl-s">range-slider"> input type pl-s">range" /> input type pl-s">range" /> div class pl-s">range-slider__thumb" data-lower>div> div class pl-s">range-slider__thumb" data-upper>div> div class pl-s">range-slider__range">div> div>

is the wrapper element that was used to instantiate the range slider initially and is added with a CSS class named range-slider .

elements are used to set values and are hidden.

elements are the slidable thumbs replacing the original thumbs from the elements.

element fills up the space between the thumbs.

Styling

element-selector < /* CSS for the wrapper element */ > element-selector[data-disabled] < /* CSS for disabled range slider element */ > element-selector .range-slider__range < /* CSS for range */ > element-selector .range-slider__range[data-active] < /* CSS for active (actively being dragged) range */ > element-selector .range-slider__thumb < /* CSS for thumbs */ > element-selector .range-slider__thumb[data-lower] < /* CSS for lower thumb */ > element-selector .range-slider__thumb[data-upper] < /* CSS for upper thumb */ > element-selector .range-slider__thumb[data-active] < /* CSS for active (actively being dragged) thumbs */ > element-selector .range-slider__thumb[data-disabled] < /* CSS for disabled thumbs */ >

Refer to the style.css file to know more about styling the range slider element and its children.

Источник