The Future of Range Inputs

A common use case for selecting a minimum and maximum value. The segment between the handles is styled differently.

Demonstrates two-way data binding. Drag the handles to update the input fields, or type in the fields to move the handles.

You could use stepbetween to prevent thumbs form colliding.

An opening hours selector with four handles to define morning and afternoon shifts. The segments between handles are styled to show open/closed times, with a datalist showing hourly labels and enabling half-hour steps.

Demonstrates multiple handles and custom-colored segments for different temperature zones.

Demonstrates using invisible handles with the CSS Anchoring API to position custom tooltips. The tooltips appear to be the draggable handles, and their values are updated via JavaScript.

Shows integration with a <datalist> for tick marks and labels, and enforces a minimum distance of 25 between handles via stepbetween="25".

Each thumb can have its own `min` and `max` attributes, creating individual constraints. The thumb's movement will be restricted to the tighter of its own bounds and the overall component's bounds.

If a thumb's `min` or `max` exceeds the range of the component, it will be constrained by the component's bounds. Here, the track is 100-200, but the thumbs try to go from 0-300.

A complex example with three handles. The middle handle is constrained to a small central zone (30-70), while the outer handles have full range and can push the middle one.

A complete visual transformation to create a budget allocation tool. The component's segments are styled as colored bars, and the thumbs as draggable separators. All labels and percentages are updated via JavaScript as well as an aria-polite to give feedback to the user about the current value of the slider..

Recreating a classic slider look. This demonstrates using the CSS Anchoring API for tooltips with heavy custom styling on all component parts.

Use the component's public methods and properties to get and set values programmatically.

This example shows how to style individual tick marks and their labels using CSS Parts. The '50%' tick is highlighted with a different color and height.

A more creative example styling ticks to look like milestones on a project timeline. Key milestones are larger and have distinct colors.

This example uses three handles and styled ticks to represent different phases in a process, with each major tick mark having a unique color.