AIMRAN
60km
HTML + CSSFilters

Circular slider

A round dial you drag around the centre, with the value shown large in the middle.

Settings

16px
1x

Code

<div class="uv-frc"><svg viewBox="0 0 120 120"><circle class="bg" cx="60" cy="60" r="50"/><circle class="pg" cx="60" cy="60" r="50"/></svg><div class="ct"><b class="out">60</b><span>km</span></div></div>

Prompt for AI

Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.

More in Filters

Filter chips

FiltersReact + Motion

Segmented control

FiltersReact + Motion

Multi-select dropdown

FiltersReact + Motion

Sliding pill filter chips

FiltersHTML + CSS

Centre-fill filter chips

FiltersHTML + CSS

Gradient border chips

FiltersHTML + CSS

Checkmark filter chips

FiltersHTML + CSS

Removable chips with X

FiltersHTML + CSS

Where to use it

A dial feels right for distance or intensity. A local jobs board asking how far you'd travel, a dating app setting a search radius in kilometres, or a smart home panel adjusting the heating. It takes less width than a straight slider and makes a nice focal point on a filter screen. Also known as a circular range slider.

Dials are harder to control precisely, so use them for rough values, not exact ones. Give the ring enough size on phones, at least the width of a thumb. If people need an exact number, offer an input alongside.