A discrete value slider built with pure HTML and CSS that allows users to select from predefined step intervals along a range track. It enhances controlled value selection clarity while maintaining a lightweight and responsive structure.
Usage
Use this component when interfaces require fixed step input selection, such as rating controls, pricing filters, quantity selectors, or configuration options with limited value ranges.
Implementation
The slider is implemented using a styled HTML range input with defined step attributes, while CSS customizes the track and thumb appearance. Visual markers can be added to emphasize fixed selection points across the track.
HTML
<div class="slider-discrete">
<input type="range" min="1" max="5" value="3" />
</div>CSS
.slider-discrete {
width: 200px;
}
.slider-discrete input[type="range"] {
width: 100%;
appearance: none;
height: 4px;
border-radius: 999px;
background: #e5e7eb;
outline: none;
}
.slider-discrete input[type="range"]::-webkit-slider-thumb {
appearance: none;
width: 14px;
height: 14px;
border-radius: 50%;
background: #6366f1;
cursor: pointer;
}
@media (prefers-color-scheme: dark) {
.slider-discrete input[type="range"] {
background: #374151;
}
.slider-discrete input[type="range"]::-webkit-slider-thumb {
background: #818cf8;
}
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Supports fixed step value intervals
- Enhances precision based input clarity
- Fully responsive across breakpoints
- Suitable for filters and configuration panels
- Easy to customize track markers and thumb design
Preview styles shown. Production customization recommended.
Browse More UI Components
Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.