Slider

Source code
Table of Contents

Usage

Default

0 100 
<script>
  import { Slider } from "carbon-components-svelte";
</script>

<Slider />

Custom minimum, maximum values

10 990 MB 
<script>
  import { Slider } from "carbon-components-svelte";
</script>

<Slider
  labelText="Runtime memory (MB)"
  min={10}
  max={990}
  maxLabel="990 MB"
  value={100}
/>

Custom step value

10 990 MB 
<script>
  import { Slider } from "carbon-components-svelte";
</script>

<Slider
  labelText="Runtime memory (MB)"
  min={10}
  max={990}
  maxLabel="990 MB"
  value={100}
  step={10}
/>

Light variant

10 990 MB 
<script>
  import { Slider } from "carbon-components-svelte";
</script>

<Slider
  light
  labelText="Runtime memory (MB)"
  min={10}
  max={990}
  maxLabel="990 MB"
  value={100}
  step={10}
/>

Skeleton

<script>
  import { SliderSkeleton } from "carbon-components-svelte";
</script>

<SliderSkeleton />

Skeleton (hidden label)

<script>
  import { SliderSkeleton } from "carbon-components-svelte";
</script>

<SliderSkeleton hideLabel />
Table of Contents