Html range slider input

How to Create Range Slider With HTML5 and jQuery

Before the introduction of HTML5, we couldn’t even think about creating a range slider on a webpage. HTML5 introduced new attributes and features, including the range input type. The range input element allows you to create sliding controls for your site users.

In this tutorial, we will show you how with a little jQuery code, we can capture and respond to user interaction with the range slider control.

Here is a jQuery solution to display values for all range input elements:

$(function () < $('.slider').on('input change', function () < $(this).next($('.slider_label')).html(this.value); >); $('.slider_label').each(function () < let value = $(this).prev().attr('value'); $(this).html(value); >); >)

Let’s see the code in action:

html> html> head> title>Title of the document title> script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"> script> head> body> h2>Range Slider h2> p> label for="range_weight">Weight: label> input type="range" name="weight" class="slider" min="0" max="100" value="60"> span class="slider_label"> span> p> p> label for="range_weight">Height: label> input type="range" name="height" class="slider" min="0" max="100" value="8"> span class="slider_label"> span> p> p> label for="range_weight">Length: label> input type="range" name="length" class="slider" min="0" max="100" value="30"> span class="slider_label"> span> p> script> $(function( ) < $('.slider').on('input change', function( ) < $(this).next($('.slider_label')).html(this.value); >); $('.slider_label').each(function( ) < let value = $(this).prev().attr('value'); $(this).html(value); >); >) script> body> html>

Another example of range slider with negative and decimal values:

html> html> head> title>Title of the document title> script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"> script> head> body> h2>Range Slider h2> p> label for="range_weight">Negative: label> input type="range" name="negative" class="slider" min="-25" max="25" value="-10"> span class="slider_label"> span> p> p> label for="range_weight">Decimal: label> input type="range" name="decimal" class="slider" min="0.001" max="2" value="0.08" step="0.001"> span class="slider_label"> span> p> script> $(function( ) < $('.slider').on('input change', function( ) < $(this).next($('.slider_label')).html(this.value); >); $('.slider_label').each(function( ) < let value = $(this).prev().attr('value'); $(this).html(value); >); >) script> body> html>

Another example of price range slider with:

html> html> head> title>Title of the document title> script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js'> script> style> .sliderId < width: 500px; margin: auto; text-align: center; position: relative; height: 100px; > .sliderId svg, .sliderId input[type=range] < position: absolute; left: 0; bottom: 0; > input[type=number] < border: 1px solid #ddd; text-align: center; font-size: 24px; -moz-appearance: textfield; > input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button < -webkit-appearance: none; >input[type=number]:invalid, input[type=number]:out-of-range < border: 2px solid #e60023; > input[type=range] < -webkit-appearance: none; width: 100%; > input[type=range]:focus < outline: none; > input[type=range]:focus::-webkit-slider-runnable-track < background: #1da1f2; > input[type=range]:focus::-ms-fill-lower < background: #1da1f2; > input[type=range]:focus::-ms-fill-upper < background: #1da1f2; > input[type=range]::-webkit-slider-runnable-track < width: 100%; height: 5px; cursor: pointer; animate: 0.2s; background: #1da1f2; border-radius: 1px; box-shadow: none; border: 0; > input[type=range]::-webkit-slider-thumb < z-index: 2; position: relative; box-shadow: 0px 0px 0px #000; border: 1px solid #1da1f2; height: 18px; width: 18px; border-radius: 25px; background: #a1d0ff; cursor: pointer; -webkit-appearance: none; margin-top: -7px; > input[type=range]::-moz-range-track < width: 100%; height: 5px; cursor: pointer; animate: 0.2s; background: #1da1f2; border-radius: 1px; box-shadow: none; border: 0; > input[type=range]::-moz-range-thumb < z-index: 2; position: relative; box-shadow: 0px 0px 0px #000; border: 1px solid #1da1f2; height: 18px; width: 18px; border-radius: 25px; background: #a1d0ff; cursor: pointer; > input[type=range]::-ms-track < width: 100%; height: 5px; cursor: pointer; animate: 0.2s; background: transparent; border-color: transparent; color: transparent; > input[type=range]::-ms-fill-lower, input[type=range]::-ms-fill-upper < background: #1da1f2; border-radius: 1px; box-shadow: none; border: 0; > input[type=range]::-ms-thumb < z-index: 2; position: relative; box-shadow: 0px 0px 0px #000; border: 1px solid #1da1f2; height: 18px; width: 18px; border-radius: 25px; background: #a1d0ff; cursor: pointer; > style> head> body> div class="sliderId"> span>from input type="number" value="1000" min="0" max="100000"/> to input type="number" value="10000" min="0" max="100000"/> span> input value="10000" min="0" max="100000" step="500" type="range" /> input value="50000" min="0" max="100000" step="500" type="range" /> svg width="100%" height="25"> line x1="4" x2="520" stroke="#212121" stroke-width="20" stroke-dasharray="1 25"> line> svg> div> script> (function( ) < let parent = document.querySelector(".sliderId"); if(!parent) return; let rangeSlide = parent.querySelectorAll("input[type=range]"); let numberSlide = parent.querySelectorAll("input[type=number]"); rangeSlide.forEach(function(el) < el.oninput = function( ) < let slide1 = parseFloat(rangeSlide[0].value); let slide2 = parseFloat(rangeSlide[1].value); if(slide1 > slide2) < [slide1, slide2] = [slide2, slide1]; >numberSlide[0].value = slide1; numberSlide[1].value = slide2; > >); numberSlide.forEach(function(el) < el.oninput = function( ) < let number1 = parseFloat(numberSlide[0].value); let number2 = parseFloat(numberSlide[1].value); if(number1 > number2) < let tmp = number1; numberSlide[0].value = number2; numberSlide[1].value = tmp; > rangeSlide[0].value = number1; rangeSlide[1].value = number2; > >); >)(); script> body> html>

Источник

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;
>

Источник

CSS Range Sliders

Welcome to our collection of CSS Range Sliders! Here, we have curated a collection of hand-picked free HTML and CSS range slider code examples from CodePen, GitHub, and other resources. In this update of June 2023 collection, we have added seven new items that showcase the versatility and creativity of range sliders in web design.

These examples demonstrate how range sliders can be used to enhance user experience, add interactivity, and improve the overall aesthetics of a webpage. From simple and minimalistic designs to more complex and interactive sliders, this collection offers a wide range of options to suit various design preferences and project requirements.

Related Articles:

Author

Links

Made with

About a code

Ovoid CSS Range Slider

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

Author

Links

Made with

About a code

Curved CSS Range Slider

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

Author

Links

Made with

About a code

Bubble Range Slider

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

Author

Links

Made with

About a code

iOS Like Vertical Range Input

The first range input has a minimum value of «0,» a maximum value of «100», and a default value of «50». The second range input has the same values but with a step of «12.5». It also has two pseudo-elements, ::before and ::after , which are positioned absolutely and display the «+» and «−» symbols respectively. The thumb of the range input is hidden by setting its width to «0» and applying a box-shadow to create a visual effect. For the second range input with the step attribute, the background-color is set to transparent and a repeating-linear-gradient is used to create a striped pattern.

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

Author

Links

Made with

About a code

Metallic Range Input with Datalist Ticks

The range input has a datalist element associated with it, which contains five options for values «0», «25», «50», «75», and «100». The range input is styled to have a custom appearance, with a linear gradient background and an outline. The thumb of the range input is also styled with a custom appearance using radial and conic gradients for the background and multiple box shadows for shading. The datalist is styled to be displayed as a flex container with its options evenly spaced out and given a custom appearance with padding , border , text-shadow , and box-shadow .

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

Author

Источник