A micro range slider built with pure HTML and CSS designed for compact layouts where space is limited. It provides precise value adjustment in minimal UI areas without compromising responsiveness.
Usage
Use this component when interfaces require compact input controls, such as toolbar settings, small dashboard widgets, filter panels, or mobile first layouts with limited horizontal space.
Implementation
The slider uses a scaled HTML range input element with reduced track height and a compact thumb design. CSS customizes spacing, alignment, and responsive behavior to ensure usability across devices.
HTML
<div class="slider-micro">
<input
type="range"
min="0"
max="100"
value="40"
style="--val: 40%;"
oninput="this.style.setProperty('--val', this.value + '%')"
>
</div>CSS
.slider-micro {
width: 200px;
padding: 0.5rem;
}
.slider-micro input[type="range"] {
width: 100%;
appearance: none;
height: 6px;
border-radius: 999px;
background:
linear-gradient(
90deg,
#6366f1 var(--val),
#e5e7eb var(--val)
);
outline: none;
cursor: pointer;
}
.slider-micro input[type="range"]::-webkit-slider-thumb {
appearance: none;
width: 16px;
height: 16px;
border-radius: 50%;
background: #6366f1;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
border: none;
}
.slider-micro input[type="range"]::-moz-range-track {
height: 6px;
border-radius: 999px;
background: transparent;
}
.slider-micro input[type="range"]::-moz-range-thumb {
width: 16px;
height: 16px;
border-radius: 50%;
background: #6366f1;
border: none;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}
.slider-micro input[type="range"]:focus-visible {
outline: 2px solid #6366f1;
outline-offset: 4px;
}
@media (prefers-color-scheme: dark) {
.slider-micro input[type="range"] {
background:
linear-gradient(
90deg,
#818cf8 var(--val),
#374151 var(--val)
);
}
.slider-micro input[type="range"]::-webkit-slider-thumb,
.slider-micro input[type="range"]::-moz-range-thumb {
background: #818cf8;
}
.slider-micro input[type="range"]:focus-visible {
outline-color: #818cf8;
}
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Designed for compact interface areas
- Enhances space efficient value control
- Fully responsive across breakpoints
- Suitable for dashboards and mobile layouts
- Easy to customize thumb size and track thickness
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.