Playground · Inputs & forms

Detent Slider

  • motion component
  • iOS
  • Android
  • Flutter 3.47.0+

A premium slider with a thick rounded track and tick marks at its detents: the thumb stretches with the drag, clicks into each detent, rubber-bands past the ends and settles with a spring, while its value springs up into a bubble.

Version 1.1.0 · What changed
  • 1.1.0 2026-10-06 New valueLabel argument words the value a screen reader hears ('60 por ciento'). The slider now takes keyboard focus (arrow keys step a detent, Home and End go to the ends, with a focus ring), the touch target is 44 pixels tall however thin the track, and the value follows text sizes up to 200%. The default active colour is a slightly deeper violet (6C4FFF, was 7C5CFF) so white text on it reaches 4.5:1.
  • 1.0.1 2026-10-03 Setting onChanged to null during a drag now ends the drag and calls onChangeEnd, a value the parent changes during a drag (such as one it limits) is applied when the drag ends, and changing only detents now reports the re-snapped value through onChanged.
  • 1.0.0 2026-10-03 First release.

Parameters

Where it starts, from 0 to 100, snapped to the nearest detent. It keeps the user's value after that, and follows this again whenever your code changes it.

How many steps the track is divided into: the thumb snaps to each, with a tick mark and a click. 0 (or 1) makes it continuous.

The colour of the filled part of the track and of the value bubble.

The colour of the unfilled part of the track.

The colour of the thumb. Tick marks, icons and the value are drawn in it too, more faintly, so pick one that reads on your background.

The thickness of the track in logical pixels. The thumb and icons grow with it.

Shows the value above the thumb: small at rest, springing up into a bubble while dragging. It reserves room above the track.

A selection click at each detent crossed (or at the ends when continuous), on phones that support it.

A pair of icons at the low and high ends of the track. They step aside when the slider is too narrow for them.

How much the thumb overshoots and wobbles as it settles, and the bubble as it springs up.

Loading Preview…

Send to your coding agent

Add Sheen's MCP server once, then paste the prompt. No key or account needed.

Run in your project (Claude Code)
claude mcp add --transport http sheen https://sheen.ciroapps.com/api/mcp
Then ask your agent
Use the Sheen MCP server to add the Detent Slider Component to this Flutter app. Call get_export with componentId "detent-slider" and parameters {"value":60,"detents":10,"activeColor":"6C4FFF","trackColor":"2C2C30","thumbColor":"FFFFFF","height":12,"showValue":true,"haptics":true,"icons":"volume","bounciness":0.4}, then follow the install steps it returns. (Tuned in the Sheen Playground: https://sheen.ciroapps.com/c/detent-slider?value=60&detents=10&activeColor=6C4FFF&trackColor=2C2C30&thumbColor=FFFFFF&height=12&showValue=true&haptics=true&icons=volume&bounciness=0.4)