Issue
I'm have the range:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous" />
</head>
<body>
<div class="container mb-4 col-sm-5">
<input type="range" class="custom-range" min="0" max="10" value="10" id="range-input" style="width: 100%">
</div>
</body>
</html>And I want to disable it (it should still look the same, but the user can't interact with it anymore), but without change the style. For example:
In the image, the one at the top is enabled, and the one at the bottom is disabled; I want to disable it while maintaining the styling of the top range.
I tried to recreate the original styling manually, but I was not successful:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous" />
<style>
input[type=range]:disabled {
background-color: blue;
color: blue;
background: blue;
}
</style>
</head>
<body>
<div class="container mb-4 col-sm-5">
<input type="range" class="custom-range" min="0" max="10" value="10" id="range-input" style="width: 100%" disabled>
</div>
</body>
</html>Apart from that, I couldn't find any other possible solution in my research.
Solution
"How" disabled do you actually need it to be?
Setting pointer-events: none, and adding tabindex="-1", gets you an element that still looks the same, but the user can't interact with any more (at least via mouse click / tap, and they can't focus it for keyboard control either - not sure if there is anything else?)
Since no name attribute is set, the field would not become part of a form submission data set to begin with here - if that's different in your real use case, you could also remove (and re-set) a name, when you toggle the tabindex on and off.
Answered By - CBroe
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.