<sl-range>

Ranges allow the user to select a single value within a given range using a slider.

The source repository is archived and read-only.

Superseded by <wa-slider> in Web Awesome.

Category

Forms

Built with

Lit

Library

Shoelace

Author

Shoelace

Package

@shoelace-style/shoelace

Component size

7.4 kB JS (minified + gzipped, JS includes dependencies beyond the library)

Library size

7.9 kB JS (shared by every Shoelace component, loaded once per page)

Downloads

142,636/week · jsDelivr 2,182,806,504 hits/month (whole @shoelace-style/shoelace package)

GitHub stars

13,834

Latest stable version

2.20.1

Last published

Mar 11, 2025

Component last changed

Dec 2, 2024 (in 2.19.0)

License

MIT

Status

stable

• Documentation
• Source code

• Documentation
• Source code

Attributes

• title
• name
• value
• label
• help-text
• disabled
• min
• max
• step
• tooltip
• form

Slots

• label
• help-text

Events

• sl-blur
• sl-change
• sl-focus
• sl-input
• sl-invalid

CSS Parts

• form-control
• form-control-label
• form-control-input
• form-control-help-text
• base
• input
• tooltip