A compact range slider that increases track contrast on interaction to signal value change.
HTML
<div class="slider-pressure">
<input type="range">
</div>CSS
.slider-pressure {
width: 200px;
}
.slider-pressure input[type="range"] {
width: 100%;
background: transparent;
appearance: none;
}
.slider-pressure input::-webkit-slider-runnable-track {
height: 6px;
border-radius: 999px;
background: #374151;
}
.slider-pressure input::-webkit-slider-thumb {
appearance: none;
width: 14px;
height: 14px;
border-radius: 50%;
background: #60a5fa;
margin-top: -4px;
transition: transform 120ms ease;
}
.slider-pressure input:active::-webkit-slider-thumb {
transform: scale(1.2);
}Notes
- Clear track visibility
- Thumb-only interaction animation
- Works well in dark UIs
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.