Sliders

Variants of the slider scenario, each on its own isolated page.

• Single slider (baseline)

  Move one range slider to match the goal value.

  • slider
  • range
  • input
  • single

• Dual Range Slider

  Select a range by dragging both min and max handles (e.g. price range).

  • slider
  • range
  • dual
  • price

• Stepped Slider

  A discrete slider that snaps to specific values instead of a continuous range.

  • slider
  • discrete
  • stepped
  • snap

• Thermostat Dial (Circular)

  Click and drag the circular dial to select the target temperature.

  • dial
  • circular
  • thermostat
  • iot