Menu
I have to implement HTML5 input type Range
<input type="range" min="0" max="100" step="10" value="40" />
Now I want to show ticks on steps just like on the image attached. Is this possible? If so, how?
656
asked Oct 25 '25 00:10
Implement this with HTML5's input type Range is not possible because it accept only one input .
You can achieve this by using a jQuery slider check this:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>slider</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#slider-range" ).slider({
range: true,
min: 0,
max: 500,
values: [ 75, 300 ],
slide: function( event, ui ) {
$( "#amount" ).val( "₹" + ui.values[ 0 ] + " - ₹" + ui.values[ 1 ] );
}
});
$( "#amount" ).val( "₹" + $( "#slider-range" ).slider( "values", 0 ) +
" - ₹" + $( "#slider-range" ).slider( "values", 1 ) );
} );
</script>
</head>
<body>
<p>
<label for="amount">Price range:</label>
<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider-range"></div>
</body>
</html>I've made you a simple example which will show you how to get what you want.
This code will generate ticks for you, and you can change the amount of ticks and their style accordingly. You should generate the HTML automatically.
.rangeWrap {
width: 40%;
}
.rangeWrap input {
width: 100%;
margin: 0;
}
.rangeWrap .ticks {
display: flex;
justify-content: space-between;
height: 6px;
margin: -1.5em 5px 0 6px;
font: 10px Arial;
counter-reset: count -1;
}
.rangeWrap .ticks > div {
height: 100%;
width: 1px;
background: silver;
counter-increment: count 1;
}
.rangeWrap .ticks > div:nth-child(5n - 4) {
height: 200%;
}
.rangeWrap .ticks > div:nth-child(5n - 4)::before {
display: block;
content: '0'; /* min value */
transform: translate(-50%, 100%);
text-align: center;
width: 16px;
}
.rangeWrap .ticks > div:nth-child(6)::before {
content: '50'; /* middle value */
}
.rangeWrap .ticks > div:last-child::before {
content: '100'; /* max value */
}<div class='rangeWrap'>
<input type="range" min="0" max="100" step="10" value="40" />
<div class='ticks'>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
