mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 02:11:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

docs(slider): improve docs

Browse source
This commit is contained in:
Eric Liu 2025-05-03 10:46:38 -07:00
commit b4cae35c52
1 changed files with 25 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

28
docs/src/pages/components/Slider.svx
View file

@ -7,8 +7,12 @@ components: ["Slider", "SliderSkeleton"]
import Preview from "../../components/Preview.svelte"; import Preview from "../../components/Preview.svelte";
</script> </script>
`Slider` provides a visual way to select a value from a range. It supports keyboard navigation, custom ranges, step values, and various states.
## Default ## Default
Create a basic slider with a label and default range (0-100).
<Slider labelText="Instances" value={0} /> <Slider labelText="Instances" value={0} />
## Full width ## Full width
@ -19,36 +23,54 @@ Set `fullWidth` to `true` for the slider to span the full width of its containin
## Hidden label ## Hidden label
Visually hide the label while maintaining accessibility.
<Slider labelText="Instances" hideLabel value={0} /> <Slider labelText="Instances" hideLabel value={0} />
## Hidden text input ## Hidden text input
Hide the text input while keeping the slider functionality.
<Slider labelText="Instances" hideTextInput value={0} /> <Slider labelText="Instances" hideTextInput value={0} />
## Custom minimum, maximum values ## Custom minimum, maximum values
Set custom range values and labels.
<Slider labelText="Runtime memory (MB)" min={10} max={990} maxLabel="990 MB" value={100} /> <Slider labelText="Runtime memory (MB)" min={10} max={990} maxLabel="990 MB" value={100} />
## Custom step value ## Custom step value
Specify the step value for more precise control.
<Slider labelText="Runtime memory (MB)" min={10} max={990} maxLabel="990 MB" value={100} step={10} /> <Slider labelText="Runtime memory (MB)" min={10} max={990} maxLabel="990 MB" value={100} step={10} />
## Light variant ## Light variant
<Slider light labelText="Runtime memory (MB)" min={10} max={990} maxLabel="990 MB" value={100} step={10} /> Use the light variant for light backgrounds.
<Slider light labelText="Runtime memory (MB)" min={10} max={990} maxLabel="990 MB" value={100} step={10} />
## Invalid state ## Invalid state
<Slider invalid labelText="Runtime memory (MB)" min={10} max={990} maxLabel="990 MB" value={100} step={10} /> Indicate an invalid state with the `invalid` prop.
<Slider invalid labelText="Runtime memory (MB)" min={10} max={990} maxLabel="990 MB" value={100} step={10} />
## Disabled state ## Disabled state
<Slider disabled labelText="Runtime memory (MB)" min={10} max={990} maxLabel="990 MB" value={100} step={10} /> Disable the slider to prevent interaction.
<Slider disabled labelText="Runtime memory (MB)" min={10} max={990} maxLabel="990 MB" value={100} step={10} />
## Skeleton ## Skeleton
Show a loading state with the skeleton variant.
<SliderSkeleton /> <SliderSkeleton />
## Skeleton (hidden label) ## Skeleton (hidden label)
Show a loading state without a label.
<SliderSkeleton hideLabel /> <SliderSkeleton hideLabel />