Range

Options

Basic usage

html

Copy

Example disabled state

html

Copy

Button inside range

ds-button can be used inside ds-range.

html

Copy

Text addon inside range

ds-text can be used inside ds-range. See ds-text for further examples.

html

Copy

Icon inside range

ds-text can be used inside ds-range. See ds-text for further examples.

html

Copy

html

Copy

Range with tick marks

html

Copy

Range with tick marks and labels

ds-range accomodates labels up to 5 characters in length.

html

Copy

Manifest

The component manifest describes this component's API — its modifiers, structure, data attributes, CSS custom properties, accessibility notes, and example markup. It is consumed by tooling such as AI assistants and code generators.

Latest version: https://assets.soracom.io/sds/latest/ds-range/index.mjs

index.mjs

Copy