<.dm_slider
  id="slider-single-default"
  label="Volume"
  max={100}
  min={0}
  name="volume"
  value={75}
 />

<.dm_slider
  id="slider-single-with-steps"
  label="Brightness"
  max={10}
  min={0}
  name="brightness"
  value={5}
  step={1}
 />

<.dm_slider id="slider-sizes-xs" label="XS slider" name="xs" size="xs" value="50" />
<.dm_slider id="slider-sizes-sm" label="SM slider" name="sm" size="sm" value="50" />
<.dm_slider id="slider-sizes-md" label="MD slider" name="md" size="md" value="50" />
<.dm_slider id="slider-sizes-lg" label="LG slider" name="lg" size="lg" value="50" />

<.dm_slider
  id="slider-colors-primary"
  label="Primary"
  name="primary"
  value="60"
  color="primary"
 />
<.dm_slider
  id="slider-colors-secondary"
  label="Secondary"
  name="secondary"
  value="60"
  color="secondary"
 />
<.dm_slider id="slider-colors-accent" label="Accent" name="accent" value="60" color="accent" />
<.dm_slider
  id="slider-colors-success"
  label="Success"
  name="success"
  value="60"
  color="success"
 />
<.dm_slider
  id="slider-colors-warning"
  label="Warning"
  name="warning"
  value="60"
  color="warning"
 />
<.dm_slider id="slider-colors-error" label="Error" name="error" value="60" color="error" />
<.dm_slider
  id="slider-colors-tertiary"
  label="Tertiary"
  name="tertiary"
  value="60"
  color="tertiary"
 />
<.dm_slider id="slider-colors-info" label="Info" name="info" value="60" color="info" />

<.dm_slider
  id="slider-single-vertical"
  label="Vertical"
  max={100}
  min={0}
  name="vertical"
  value={60}
  vertical
 />

<.dm_slider
  id="slider-single-no-value-label"
  label="Audio Quality"
  max={100}
  min={0}
  name="quality"
  value={80}
 />

<.dm_slider
  disabled
  id="slider-single-disabled"
  label="Disabled Slider"
  max={100}
  min={0}
  name="slider_disabled"
  value={50}
 />

<.dm_slider
  id="slider-validation-states-success-state"
  label="Valid Range"
  name="sl_vs_success"
  value={75}
  state="success"
 />
<.dm_slider
  id="slider-validation-states-warning-state"
  label="Review Range"
  name="sl_vs_warning"
  value={25}
  state="warning"
 />

<.dm_slider
  id="slider-single-with-helper"
  label="Opacity"
  max={100}
  min={0}
  name="slider_helper"
  value={80}
  helper="Adjust the opacity level (0–100%)"
 />

<.dm_slider
  id="slider-single-with-errors"
  label="Priority"
  max={100}
  min={0}
  name="slider_errors"
  value={50}
  errors={["Value must be between 10 and 90."]}
 />