How to make a range slider using HTML

I am currently working with a range slider that displays only one value, but I want to show two limits - the minimum and maximum values. This is similar to a price range slider where users can select a range of prices. I need to store both the min and max values in a database, but my current setup only allows for one value to be displayed.

While there are different sliders created using JavaScript, I am curious if it's possible to modify this code to include both max and min values on a single slider (@fiddle)

<body>
    <form>
        <input type="range" name="amountRange" min="0" max="20" value="0" oninput="this.form.amountInput.value=this.value" />
        <input type="number" name="amountInput" min="0" max="20" value="0" oninput="this.form.amountRange.value=this.value" />
    </form>
</body>
javascriptjqueryhtmlcss

Answer №1

If you want to add a widget, you have the option of creating one yourself.

Here is an overview:

  • HTML and JavaScript:
    1. Create a container for the widget with two range inputs inside
    2. Utilize data attributes on the container to store the lower and higher values (e.g., data-lbound and data-ubound)
    3. Update the data attributes of the container when input events occur on the range inputs
    4. Retrieve these values from the data attributes whenever needed for form submissions or other purposes
  • CSS:
    1. Use absolute positioning to stack the two range inputs within the container
    2. Adjust the position of the thumbs on the range inputs so they can be used without interference
    3. If necessary, hide parts of the slider/track
    4. Add an ::after pseudo-element to the container displaying the current ranges based on the data attributes
    5. Additional styling can be done to enhance the appearance of the range inputs

Check out this demo I made. (Best viewed in Chrome or Firefox) It also works with keyboard inputs.

Fiddle: http://jsfiddle.net/abhitalks/a1f1k8d0/2/

Snippet:

.multi-range, .multi-range * { box-sizing: border-box; padding: 0; margin: 0; }
.multi-range { 
    position: relative; width: 160px; height: 28px; margin: 16px;
    border: 1px solid #ddd; font-family: monospace;
}
.multi-range > hr { position: absolute; width: 100%; top: 50%; }
.multi-range > input[type=range] {
    width: calc(100% - 16px); 
    position: absolute; bottom: 6px; left: 0;
}
.multi-range > input[type=range]:last-of-type { margin-left: 16px; }
.multi-range > input[type=range]::-webkit-slider-thumb { transform: translateY(-18px); }
.multi-range > input[type=range]::-webkit-slider-runnable-track { -webkit-appearance: none; height: 0px; }
.multi-range > input[type=range]::-moz-range-thumb { transform: translateY(-18px); }
.multi-range > input[type=range]::-moz-range-track { -webkit-appearance: none; height: 0px; }
.multi-range > input[type=range]::-ms-thumb { transform: translateY(-18px); }
.multi-range > input[type=range]::-ms-track { -webkit-appearance: none; height: 0px; }
.multi-range::after { 
    content: attr(data-lbound) ' - ' attr(data-ubound); 
    position: absolute; top: 0; left: 100%; white-space: nowrap;
    display: block; padding: 0px 4px; margin: -1px 2px;
    height: 26px; width: auto; border: 1px solid #ddd; 
    font-size: 13px; line-height: 26px;
}
<div class='multi-range' data-lbound='10' data-ubound='50'>
    <hr />
    <input type='range' 
           min='10' max='45' step='5' value='10' 
           oninput='this.parentNode.dataset.lbound=this.value;'
    />
    <input type='range' 
           min='15' max='50' step='5' value='50' 
           oninput='this.parentNode.dataset.ubound=this.value;'
    />
</div>

Note: This demo serves as an example only. While it works well in Chrome and Firefox, compatibility issues may arise in IE/Edge due to differences in slider handling. Customization may be needed for optimal performance with IE/Edge browsers.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The MIME type 'text/html' is incompatible with stylesheet MIME type and is not supported

I have exhausted all possible solutions for the issue, from specifying the type for <link rel="stylesheet" href="./style.css" /> to using app.use(express.static('public')), but unfortunately, none of them seem to resolve the problem. index ...

javascriptcssreactjswebpackmime-types

Why does the ReactJS MaterialUI Modal fail to update properly?

Recently, I encountered a curious issue with my Modal component: https://i.stack.imgur.com/dkj4Q.png When I open the dropdown and select a field, it updates the state of the Object but fails to render it in the UI. Strangely, if I perform the same action ...

javascriptreactjstypescriptmaterial-ui

Ways to dynamically assign a name to a div using AngularJS

Currently, I am in the process of developing a download function for an Android app using Angularjs based on this tutorial: Utilizing the Progress event in PhoneGap file transfers Everything seems to be working efficiently as planned; I can successfully d ...

javascriptandroidangularjscordova

How to incorporate Base64 textures into Three.js

I am currently trying to load textures from URLs, but since my backend code is generating planets, I need to display them using Base64 instead. I'm experimenting with procedural generation, so I'd rather not save the image and then load it via U ...

javascriptthree.js

Retrieving information enclosed within a tag

I have been researching this topic and trying to implement various solutions, but I am not achieving the desired output. Here is the HTML code snippet: <div class="span-8"> <dl> <dt> <a title="A Coruña" href="http://www. ...

c#htmlhtml-agility-pack

How can I populate an array to use in a datatable when rendering?

How can I ensure that my datatable renders with the proper data on my webpage without needing to interact with the sort button? Where should I populate the array for use in a datatable so that it occurs before the rendering? export function MyComponent() ...

javascriptreactjsasync-awaitnext.js

Issue encountered when attempting to load an STL file in three.js

I'm attempting to display a preview of an STL file using three.js. I came across a tutorial that seems to provide exactly what I need: Tutorial However, when I try to implement the code, I keep running into an error message saying undefined is not a ...

javascriptthree.js

What technique works best for changing the visibility of an image without causing other elements to shift position?

On my webpage, I have a table cell with an image that should only display when hovering over the cell. The problem is that when the image is shown, it shifts the other text to the left because its default state is "display:none". I'm searching for a s ...

jquerycsshovertoggle

Mastering advanced String templating using loops and control statements in Javascript

During runtime, I receive an array similar to the example below: var colors = ['red', 'green', 'blue']; I then need to create a JSON String that looks like this: { "color" : { "name" : "foo", "properties ...

javascriptnpm

Node.js - Error: Undefined:0 SyntaxEncountered an unexpected end of input syntax error

Exploring Node.js and Backbone.js for the first time. Using the book "Backbone Blueprints" but encountering issues with the provided code to set up the webserver. Node.js is installed and running fine. Here's the package.json code: { "name": "simp ...

javascriptjqueryjsonnode.jsbackbone.js

Updating a nested property within an array of objects in MongoDB

Storing grades for an online education application using MongoDB. Here is a sample classRoom document stored in my mongoDB database. StudentGradeObjs are kept in an array within a GradeObject. GradeObjs are stored in an array of GradeObjects inside a class ...

javascriptarraysnode.jsmongodb

Issue with Wordpress AJAX failing to initiate PHP function

I've been troubleshooting AJAX functionality in Wordpress with no success. It seems that the communication between PHP and JS is not happening properly. The goal is to update user meta when a specific div is clicked, but it's proving to be more c ...

phpjqueryajaxwordpress

Is there a way to get a Chrome extension to run automatically in the background?

I am looking to develop a custom chrome extension with a countdown timer functionality that automatically runs in the background. However, I am facing an issue where my background.js file is unable to access the popup.html file. How can I execute scripts i ...

javascriptgoogle-chrome-extension

Displaying the tag, while transmitting the identification in jQuery

Currently, I am working on implementing an AJAX autocomplete feature. The concept involves dynamically rendering an HTML page next to the input box based on the search terms entered. When it comes to the HTML part, I'll be using Rails with :layout ...

jqueryruby-on-railsajax

Personalize the color and icon of the checkbox marks in sapui5

I'm trying to customize the color of the tick on a UI5 checkbox. After inspecting the CSS, I noticed that it can be modified using the ::before selector: https://i.sstatic.net/2IMc4.png To target the checkbox, I added a class called .accept and defi ...

csscheckboxsapui5

Execute a function using a click event within a statement

Is it possible to trigger a function with parameters based on the result of a statement? For example, can we achieve something like this: (click)="datavalue.elementDataCollection.length > 1 ? AddNewDialog (datavalue,datavalue.COCLabel,mainindex,i) : r ...

javascriptangularcallbackdom-events

Prevent any pop-up windows from appearing when a specific link is clicked

On my website, I have implemented popup advertising where ads open when clicked inside the body. However, I am looking to disable popups when a link with the class donot is clicked. Currently, when the donot link is clicked, a popup opens and the link doe ...

javascriptjqueryhtmlpopup

Navigate back to the previous URL and remove any search parameters using React-router-dom V6

After navigating to a page with certain search parameters, I needed to go back to the previous URL and clear the search params. To achieve this, I utilized the useSearchParams function provided by react-router-dom v6. Within the useEffect hook, I implemen ...

javascriptreactjsreact-router-domurlsearchparams

The Slide Out Menu functioned properly in HTML, but it seems to be malfunctioning when implemented in PHP

I recently implemented a slide-in and out menu with a hamburger icon to open it and an X icon to close it. The functionality was perfect until I integrated it into PHP and WordPress. Initially, I placed the script in the header section before the meta tags ...

javascriptphphtmlcsswordpress

Paste the input text into the div element

I am attempting to create a simple form with one input field and one Div element. The goal is to have the text entered in the input field displayed in the Div when a button is clicked. Despite my efforts, I have been unable to get it to work correctly. I ...

javascripthtml