javascript - Disable track on HTML5 range input - Stack Overflow

admin管理员组

文章数量:1386576

I'm trying to find a way to prevent the user from clicking into the "track" portion of an HTML5 range input. Essentially, I only want the user to be able to use the "handle" to change the range value.

Is this even possible?

I'm trying to find a way to prevent the user from clicking into the "track" portion of an HTML5 range input. Essentially, I only want the user to be able to use the "handle" to change the range value.

Is this even possible?

• javascript
• html
• forms
• input
• range

Share Improve this question Follow asked Jul 3, 2014 at 16:09 user3802481user3802481 1111 silver badge22 bronze badges 2

• 2 I think your best bet for that amount of customization might be an existing "widget framework" where they've made their own slider intended for browsers that don't support input-ranges by default. I couldn't suggest which one to use though. – Katana314 Commented Jul 3, 2014 at 16:28
• using jquery to disable go and check <a href="stackoverflow./a/47384010/7439186">check here </a> – Darkcoder Commented Nov 20, 2017 at 1:53

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

It's possible through pointer-events at least on chrome.

input[type=range] {
pointer-events: none;
}

input[type=range]::-webkit-slider-thumb {
pointer-events:auto;
}

This will disable clicking on the track and enable clicking only on slider thumbs.

Adding disabled should work.

<input id="rangeindicator" disabled type="range" name="points" min="1" max="10">

and then you can easily change the values using jQuery, like this:

$("#rangeindicator").val(1)

本文标签： javascriptDisable track on HTML5 range inputStack Overflow