Slider

A slider input for selecting a numeric value within a range.

Volume

View source

import * as Slider from "@danielfrg/solid-ui/slider"
import styles from "./index.module.css"

export function DemoSliderHero() {
  return (
    <Slider.Root class={styles.root} defaultValue={[50]}>
      <div class={styles.header}>
        <Slider.Label class={styles.label}>Volume</Slider.Label>
        <Slider.ValueLabel class={styles["value-label"]} />
      </div>
      <Slider.Track class={styles.track}>
        <Slider.Fill class={styles.fill} />
        <Slider.Thumb class={styles.thumb}>
          <Slider.Input />
        </Slider.Thumb>
      </Slider.Track>
    </Slider.Root>
  )
}

.root {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 12rem;
  user-select: none;
  touch-action: none;
}

.root[data-orientation="vertical"] {
  height: 12rem;
  width: auto;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.label {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: var(--color-gray-900);
}

.value-label {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--color-gray-900);
}

.track {
  position: relative;
  height: 0.25rem;
  width: 100%;
  border-radius: 9999px;
  background-color: var(--color-gray-200);
}

.track[data-orientation="vertical"] {
  width: 0.25rem;
  height: 100%;
}

.fill {
  position: absolute;
  height: 100%;
  border-radius: 9999px;
  background-color: var(--color-gray-700);
}

.fill[data-orientation="vertical"] {
  width: 100%;
  height: unset;
}

.thumb {
  display: block;
  width: 1rem;
  height: 1rem;
  border-radius: 100%;
  background-color: white;
  border: none;
  outline: 1px solid var(--color-gray-300);
  top: -0.375rem;
}

.thumb[data-orientation="vertical"] {
  left: -0.375rem;
  top: unset;
}

.thumb:hover,
.thumb:focus-visible {
  outline: 1px solid var(--color-gray-400);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-gray-400) 30%, transparent);
}

.thumb[data-disabled] {
  opacity: 0.5;
}

:root {
  --color-blue: oklch(45% 50% 264deg);
  --color-red: oklch(50% 55% 31deg);
  --color-gray-50: oklch(98% 0.25% 264deg);
  --color-gray-100: oklch(12% 9.5% 264deg / 5%);
  --color-gray-200: oklch(12% 9% 264deg / 7%);
  --color-gray-300: oklch(12% 8.5% 264deg / 17%);
  --color-gray-400: oklch(12% 8% 264deg / 38%);
  --color-gray-500: oklch(12% 7.5% 264deg / 50%);
  --color-gray-600: oklch(12% 7% 264deg / 67%);
  --color-gray-700: oklch(12% 6% 264deg / 77%);
  --color-gray-800: oklch(12% 5% 264deg / 85%);
  --color-gray-900: oklch(12% 5% 264deg / 90%);
  --color-gray-950: oklch(12% 5% 264deg / 95%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-blue: oklch(69% 50% 264deg);
    --color-red: oklch(80% 55% 31deg);
    --color-gray-50: oklch(17% 0.25% 264deg);
    --color-gray-100: oklch(28% 0.75% 264deg / 65%);
    --color-gray-200: oklch(29% 0.75% 264deg / 80%);
    --color-gray-300: oklch(35% 0.75% 264deg / 80%);
    --color-gray-400: oklch(47% 0.875% 264deg / 80%);
    --color-gray-500: oklch(64% 1% 264deg / 80%);
    --color-gray-600: oklch(82% 1% 264deg / 80%);
    --color-gray-700: oklch(92% 1.125% 264deg / 80%);
    --color-gray-800: oklch(93% 0.875% 264deg / 85%);
    --color-gray-900: oklch(95% 0.5% 264deg / 90%);
    --color-gray-950: oklch(94% 0.375% 264deg / 95%);
  }
}

Examples

Multiple thumbs

Use multiple Slider.Thumb elements inside the track to create a range slider.

Label

0, 20

View source

import * as Slider from "@danielfrg/solid-ui/slider"
import styles from "./index.module.css"

export function DemoSliderMultipleThumbs() {
  return (
    <Slider.Root class={styles.root} defaultValue={[0, 20]}>
      <div class={styles.header}>
        <Slider.Label class={styles.label}>Label</Slider.Label>
        <Slider.ValueLabel class={styles["value-label"]} />
      </div>
      <Slider.Track class={styles.track}>
        <Slider.Fill class={styles.fill} />
        <Slider.Thumb class={styles.thumb}>
          <Slider.Input />
        </Slider.Thumb>
        <Slider.Thumb class={styles.thumb}>
          <Slider.Input />
        </Slider.Thumb>
      </Slider.Track>
    </Slider.Root>
  )
}

.root {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 12rem;
  user-select: none;
  touch-action: none;
}

.root[data-orientation="vertical"] {
  height: 12rem;
  width: auto;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.label {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: var(--color-gray-900);
}

.value-label {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--color-gray-900);
}

.track {
  position: relative;
  height: 0.25rem;
  width: 100%;
  border-radius: 9999px;
  background-color: var(--color-gray-200);
}

.track[data-orientation="vertical"] {
  width: 0.25rem;
  height: 100%;
}

.fill {
  position: absolute;
  height: 100%;
  border-radius: 9999px;
  background-color: var(--color-gray-700);
}

.fill[data-orientation="vertical"] {
  width: 100%;
  height: unset;
}

.thumb {
  display: block;
  width: 1rem;
  height: 1rem;
  border-radius: 100%;
  background-color: white;
  border: none;
  outline: 1px solid var(--color-gray-300);
  top: -0.375rem;
}

.thumb[data-orientation="vertical"] {
  left: -0.375rem;
  top: unset;
}

.thumb:hover,
.thumb:focus-visible {
  outline: 1px solid var(--color-gray-400);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-gray-400) 30%, transparent);
}

.thumb[data-disabled] {
  opacity: 0.5;
}

:root {
  --color-blue: oklch(45% 50% 264deg);
  --color-red: oklch(50% 55% 31deg);
  --color-gray-50: oklch(98% 0.25% 264deg);
  --color-gray-100: oklch(12% 9.5% 264deg / 5%);
  --color-gray-200: oklch(12% 9% 264deg / 7%);
  --color-gray-300: oklch(12% 8.5% 264deg / 17%);
  --color-gray-400: oklch(12% 8% 264deg / 38%);
  --color-gray-500: oklch(12% 7.5% 264deg / 50%);
  --color-gray-600: oklch(12% 7% 264deg / 67%);
  --color-gray-700: oklch(12% 6% 264deg / 77%);
  --color-gray-800: oklch(12% 5% 264deg / 85%);
  --color-gray-900: oklch(12% 5% 264deg / 90%);
  --color-gray-950: oklch(12% 5% 264deg / 95%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-blue: oklch(69% 50% 264deg);
    --color-red: oklch(80% 55% 31deg);
    --color-gray-50: oklch(17% 0.25% 264deg);
    --color-gray-100: oklch(28% 0.75% 264deg / 65%);
    --color-gray-200: oklch(29% 0.75% 264deg / 80%);
    --color-gray-300: oklch(35% 0.75% 264deg / 80%);
    --color-gray-400: oklch(47% 0.875% 264deg / 80%);
    --color-gray-500: oklch(64% 1% 264deg / 80%);
    --color-gray-600: oklch(82% 1% 264deg / 80%);
    --color-gray-700: oklch(92% 1.125% 264deg / 80%);
    --color-gray-800: oklch(93% 0.875% 264deg / 85%);
    --color-gray-900: oklch(95% 0.5% 264deg / 90%);
    --color-gray-950: oklch(94% 0.375% 264deg / 95%);
  }
}

Step

Use the step prop to control the increment between values.

Step size 8

Step size 10

Step size 20

View source

import * as Slider from "@danielfrg/solid-ui/slider"
import styles from "./index.module.css"

export function DemoSliderStep() {
  return (
    <div style={{ display: "flex", "flex-direction": "column", gap: "1.5rem" }}>
      <Slider.Root class={styles.root} step={8}>
        <div class={styles.header}>
          <Slider.Label class={styles.label}>Step size 8</Slider.Label>
          <Slider.ValueLabel class={styles["value-label"]} />
        </div>
        <Slider.Track class={styles.track}>
          <Slider.Fill class={styles.fill} />
          <Slider.Thumb class={styles.thumb}>
            <Slider.Input />
          </Slider.Thumb>
        </Slider.Track>
      </Slider.Root>
      <Slider.Root class={styles.root} step={10}>
        <div class={styles.header}>
          <Slider.Label class={styles.label}>Step size 10</Slider.Label>
          <Slider.ValueLabel class={styles["value-label"]} />
        </div>
        <Slider.Track class={styles.track}>
          <Slider.Fill class={styles.fill} />
          <Slider.Thumb class={styles.thumb}>
            <Slider.Input />
          </Slider.Thumb>
        </Slider.Track>
      </Slider.Root>
      <Slider.Root class={styles.root} step={20}>
        <div class={styles.header}>
          <Slider.Label class={styles.label}>Step size 20</Slider.Label>
          <Slider.ValueLabel class={styles["value-label"]} />
        </div>
        <Slider.Track class={styles.track}>
          <Slider.Fill class={styles.fill} />
          <Slider.Thumb class={styles.thumb}>
            <Slider.Input />
          </Slider.Thumb>
        </Slider.Track>
      </Slider.Root>
    </div>
  )
}

.root {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 12rem;
  user-select: none;
  touch-action: none;
}

.root[data-orientation="vertical"] {
  height: 12rem;
  width: auto;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.label {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: var(--color-gray-900);
}

.value-label {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--color-gray-900);
}

.track {
  position: relative;
  height: 0.25rem;
  width: 100%;
  border-radius: 9999px;
  background-color: var(--color-gray-200);
}

.track[data-orientation="vertical"] {
  width: 0.25rem;
  height: 100%;
}

.fill {
  position: absolute;
  height: 100%;
  border-radius: 9999px;
  background-color: var(--color-gray-700);
}

.fill[data-orientation="vertical"] {
  width: 100%;
  height: unset;
}

.thumb {
  display: block;
  width: 1rem;
  height: 1rem;
  border-radius: 100%;
  background-color: white;
  border: none;
  outline: 1px solid var(--color-gray-300);
  top: -0.375rem;
}

.thumb[data-orientation="vertical"] {
  left: -0.375rem;
  top: unset;
}

.thumb:hover,
.thumb:focus-visible {
  outline: 1px solid var(--color-gray-400);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-gray-400) 30%, transparent);
}

.thumb[data-disabled] {
  opacity: 0.5;
}

:root {
  --color-blue: oklch(45% 50% 264deg);
  --color-red: oklch(50% 55% 31deg);
  --color-gray-50: oklch(98% 0.25% 264deg);
  --color-gray-100: oklch(12% 9.5% 264deg / 5%);
  --color-gray-200: oklch(12% 9% 264deg / 7%);
  --color-gray-300: oklch(12% 8.5% 264deg / 17%);
  --color-gray-400: oklch(12% 8% 264deg / 38%);
  --color-gray-500: oklch(12% 7.5% 264deg / 50%);
  --color-gray-600: oklch(12% 7% 264deg / 67%);
  --color-gray-700: oklch(12% 6% 264deg / 77%);
  --color-gray-800: oklch(12% 5% 264deg / 85%);
  --color-gray-900: oklch(12% 5% 264deg / 90%);
  --color-gray-950: oklch(12% 5% 264deg / 95%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-blue: oklch(69% 50% 264deg);
    --color-red: oklch(80% 55% 31deg);
    --color-gray-50: oklch(17% 0.25% 264deg);
    --color-gray-100: oklch(28% 0.75% 264deg / 65%);
    --color-gray-200: oklch(29% 0.75% 264deg / 80%);
    --color-gray-300: oklch(35% 0.75% 264deg / 80%);
    --color-gray-400: oklch(47% 0.875% 264deg / 80%);
    --color-gray-500: oklch(64% 1% 264deg / 80%);
    --color-gray-600: oklch(82% 1% 264deg / 80%);
    --color-gray-700: oklch(92% 1.125% 264deg / 80%);
    --color-gray-800: oklch(93% 0.875% 264deg / 85%);
    --color-gray-900: oklch(95% 0.5% 264deg / 90%);
    --color-gray-950: oklch(94% 0.375% 264deg / 95%);
  }
}

Min steps between thumbs

Use minStepsBetweenThumbs to enforce a minimum distance between thumbs in a range slider.

Label

10, 20

View source

import * as Slider from "@danielfrg/solid-ui/slider"
import styles from "./index.module.css"

export function DemoSliderMinStepsBetween() {
  return (
    <Slider.Root class={styles.root} defaultValue={[10, 20]} minStepsBetweenThumbs={10}>
      <div class={styles.header}>
        <Slider.Label class={styles.label}>Label</Slider.Label>
        <Slider.ValueLabel class={styles["value-label"]} />
      </div>
      <Slider.Track class={styles.track}>
        <Slider.Fill class={styles.fill} />
        <Slider.Thumb class={styles.thumb}>
          <Slider.Input />
        </Slider.Thumb>
        <Slider.Thumb class={styles.thumb}>
          <Slider.Input />
        </Slider.Thumb>
      </Slider.Track>
    </Slider.Root>
  )
}

.root {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 12rem;
  user-select: none;
  touch-action: none;
}

.root[data-orientation="vertical"] {
  height: 12rem;
  width: auto;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.label {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: var(--color-gray-900);
}

.value-label {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--color-gray-900);
}

.track {
  position: relative;
  height: 0.25rem;
  width: 100%;
  border-radius: 9999px;
  background-color: var(--color-gray-200);
}

.track[data-orientation="vertical"] {
  width: 0.25rem;
  height: 100%;
}

.fill {
  position: absolute;
  height: 100%;
  border-radius: 9999px;
  background-color: var(--color-gray-700);
}

.fill[data-orientation="vertical"] {
  width: 100%;
  height: unset;
}

.thumb {
  display: block;
  width: 1rem;
  height: 1rem;
  border-radius: 100%;
  background-color: white;
  border: none;
  outline: 1px solid var(--color-gray-300);
  top: -0.375rem;
}

.thumb[data-orientation="vertical"] {
  left: -0.375rem;
  top: unset;
}

.thumb:hover,
.thumb:focus-visible {
  outline: 1px solid var(--color-gray-400);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-gray-400) 30%, transparent);
}

.thumb[data-disabled] {
  opacity: 0.5;
}

:root {
  --color-blue: oklch(45% 50% 264deg);
  --color-red: oklch(50% 55% 31deg);
  --color-gray-50: oklch(98% 0.25% 264deg);
  --color-gray-100: oklch(12% 9.5% 264deg / 5%);
  --color-gray-200: oklch(12% 9% 264deg / 7%);
  --color-gray-300: oklch(12% 8.5% 264deg / 17%);
  --color-gray-400: oklch(12% 8% 264deg / 38%);
  --color-gray-500: oklch(12% 7.5% 264deg / 50%);
  --color-gray-600: oklch(12% 7% 264deg / 67%);
  --color-gray-700: oklch(12% 6% 264deg / 77%);
  --color-gray-800: oklch(12% 5% 264deg / 85%);
  --color-gray-900: oklch(12% 5% 264deg / 90%);
  --color-gray-950: oklch(12% 5% 264deg / 95%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-blue: oklch(69% 50% 264deg);
    --color-red: oklch(80% 55% 31deg);
    --color-gray-50: oklch(17% 0.25% 264deg);
    --color-gray-100: oklch(28% 0.75% 264deg / 65%);
    --color-gray-200: oklch(29% 0.75% 264deg / 80%);
    --color-gray-300: oklch(35% 0.75% 264deg / 80%);
    --color-gray-400: oklch(47% 0.875% 264deg / 80%);
    --color-gray-500: oklch(64% 1% 264deg / 80%);
    --color-gray-600: oklch(82% 1% 264deg / 80%);
    --color-gray-700: oklch(92% 1.125% 264deg / 80%);
    --color-gray-800: oklch(93% 0.875% 264deg / 85%);
    --color-gray-900: oklch(95% 0.5% 264deg / 90%);
    --color-gray-950: oklch(94% 0.375% 264deg / 95%);
  }
}

Vertical

Use orientation="vertical" to render a vertical slider.

Label

View source

import * as Slider from "@danielfrg/solid-ui/slider"
import styles from "./index.module.css"

export function DemoSliderVertical() {
  return (
    <Slider.Root class={styles.root} orientation="vertical">
      <div class={styles.header}>
        <Slider.Label class={styles.label}>Label</Slider.Label>
        <Slider.ValueLabel class={styles["value-label"]} />
      </div>
      <Slider.Track class={styles.track}>
        <Slider.Fill class={styles.fill} />
        <Slider.Thumb class={styles.thumb}>
          <Slider.Input />
        </Slider.Thumb>
      </Slider.Track>
    </Slider.Root>
  )
}

.root {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 12rem;
  user-select: none;
  touch-action: none;
}

.root[data-orientation="vertical"] {
  height: 12rem;
  width: auto;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.label {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: var(--color-gray-900);
}

.value-label {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--color-gray-900);
}

.track {
  position: relative;
  height: 0.25rem;
  width: 100%;
  border-radius: 9999px;
  background-color: var(--color-gray-200);
}

.track[data-orientation="vertical"] {
  width: 0.25rem;
  height: 100%;
}

.fill {
  position: absolute;
  height: 100%;
  border-radius: 9999px;
  background-color: var(--color-gray-700);
}

.fill[data-orientation="vertical"] {
  width: 100%;
  height: unset;
}

.thumb {
  display: block;
  width: 1rem;
  height: 1rem;
  border-radius: 100%;
  background-color: white;
  border: none;
  outline: 1px solid var(--color-gray-300);
  top: -0.375rem;
}

.thumb[data-orientation="vertical"] {
  left: -0.375rem;
  top: unset;
}

.thumb:hover,
.thumb:focus-visible {
  outline: 1px solid var(--color-gray-400);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-gray-400) 30%, transparent);
}

.thumb[data-disabled] {
  opacity: 0.5;
}

:root {
  --color-blue: oklch(45% 50% 264deg);
  --color-red: oklch(50% 55% 31deg);
  --color-gray-50: oklch(98% 0.25% 264deg);
  --color-gray-100: oklch(12% 9.5% 264deg / 5%);
  --color-gray-200: oklch(12% 9% 264deg / 7%);
  --color-gray-300: oklch(12% 8.5% 264deg / 17%);
  --color-gray-400: oklch(12% 8% 264deg / 38%);
  --color-gray-500: oklch(12% 7.5% 264deg / 50%);
  --color-gray-600: oklch(12% 7% 264deg / 67%);
  --color-gray-700: oklch(12% 6% 264deg / 77%);
  --color-gray-800: oklch(12% 5% 264deg / 85%);
  --color-gray-900: oklch(12% 5% 264deg / 90%);
  --color-gray-950: oklch(12% 5% 264deg / 95%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-blue: oklch(69% 50% 264deg);
    --color-red: oklch(80% 55% 31deg);
    --color-gray-50: oklch(17% 0.25% 264deg);
    --color-gray-100: oklch(28% 0.75% 264deg / 65%);
    --color-gray-200: oklch(29% 0.75% 264deg / 80%);
    --color-gray-300: oklch(35% 0.75% 264deg / 80%);
    --color-gray-400: oklch(47% 0.875% 264deg / 80%);
    --color-gray-500: oklch(64% 1% 264deg / 80%);
    --color-gray-600: oklch(82% 1% 264deg / 80%);
    --color-gray-700: oklch(92% 1.125% 264deg / 80%);
    --color-gray-800: oklch(93% 0.875% 264deg / 85%);
    --color-gray-900: oklch(95% 0.5% 264deg / 90%);
    --color-gray-950: oklch(94% 0.375% 264deg / 95%);
  }
}

Custom value label

Use the getValueLabel prop to format the displayed value, for example to add units or format a range.

Money

$20 - $500

View source

import * as Slider from "@danielfrg/solid-ui/slider"
import styles from "./index.module.css"

export function DemoSliderCustomValueLabel() {
  return (
    <Slider.Root
      class={styles.root}
      minValue={10}
      maxValue={2000}
      defaultValue={[20, 500]}
      getValueLabel={(params) => `$${params.values[0]} - $${params.values[1]}`}
    >
      <div class={styles.header}>
        <Slider.Label class={styles.label}>Money</Slider.Label>
        <Slider.ValueLabel class={styles["value-label"]} />
      </div>
      <Slider.Track class={styles.track}>
        <Slider.Fill class={styles.fill} />
        <Slider.Thumb class={styles.thumb}>
          <Slider.Input />
        </Slider.Thumb>
        <Slider.Thumb class={styles.thumb}>
          <Slider.Input />
        </Slider.Thumb>
      </Slider.Track>
    </Slider.Root>
  )
}

.root {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 12rem;
  user-select: none;
  touch-action: none;
}

.root[data-orientation="vertical"] {
  height: 12rem;
  width: auto;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.label {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: var(--color-gray-900);
}

.value-label {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--color-gray-900);
}

.track {
  position: relative;
  height: 0.25rem;
  width: 100%;
  border-radius: 9999px;
  background-color: var(--color-gray-200);
}

.track[data-orientation="vertical"] {
  width: 0.25rem;
  height: 100%;
}

.fill {
  position: absolute;
  height: 100%;
  border-radius: 9999px;
  background-color: var(--color-gray-700);
}

.fill[data-orientation="vertical"] {
  width: 100%;
  height: unset;
}

.thumb {
  display: block;
  width: 1rem;
  height: 1rem;
  border-radius: 100%;
  background-color: white;
  border: none;
  outline: 1px solid var(--color-gray-300);
  top: -0.375rem;
}

.thumb[data-orientation="vertical"] {
  left: -0.375rem;
  top: unset;
}

.thumb:hover,
.thumb:focus-visible {
  outline: 1px solid var(--color-gray-400);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-gray-400) 30%, transparent);
}

.thumb[data-disabled] {
  opacity: 0.5;
}

:root {
  --color-blue: oklch(45% 50% 264deg);
  --color-red: oklch(50% 55% 31deg);
  --color-gray-50: oklch(98% 0.25% 264deg);
  --color-gray-100: oklch(12% 9.5% 264deg / 5%);
  --color-gray-200: oklch(12% 9% 264deg / 7%);
  --color-gray-300: oklch(12% 8.5% 264deg / 17%);
  --color-gray-400: oklch(12% 8% 264deg / 38%);
  --color-gray-500: oklch(12% 7.5% 264deg / 50%);
  --color-gray-600: oklch(12% 7% 264deg / 67%);
  --color-gray-700: oklch(12% 6% 264deg / 77%);
  --color-gray-800: oklch(12% 5% 264deg / 85%);
  --color-gray-900: oklch(12% 5% 264deg / 90%);
  --color-gray-950: oklch(12% 5% 264deg / 95%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-blue: oklch(69% 50% 264deg);
    --color-red: oklch(80% 55% 31deg);
    --color-gray-50: oklch(17% 0.25% 264deg);
    --color-gray-100: oklch(28% 0.75% 264deg / 65%);
    --color-gray-200: oklch(29% 0.75% 264deg / 80%);
    --color-gray-300: oklch(35% 0.75% 264deg / 80%);
    --color-gray-400: oklch(47% 0.875% 264deg / 80%);
    --color-gray-500: oklch(64% 1% 264deg / 80%);
    --color-gray-600: oklch(82% 1% 264deg / 80%);
    --color-gray-700: oklch(92% 1.125% 264deg / 80%);
    --color-gray-800: oklch(93% 0.875% 264deg / 85%);
    --color-gray-900: oklch(95% 0.5% 264deg / 90%);
    --color-gray-950: oklch(94% 0.375% 264deg / 95%);
  }
}

Controlled

Use the value and onChange props to control the slider state.

Label

View source

import { createSignal } from "solid-js"
import * as Slider from "@danielfrg/solid-ui/slider"
import styles from "./index.module.css"

export function DemoSliderControlled() {
  const [values, setValues] = createSignal<number[]>([40])

  return (
    <Slider.Root class={styles.root} value={values()} onChange={setValues}>
      <div class={styles.header}>
        <Slider.Label class={styles.label}>Label</Slider.Label>
        <Slider.ValueLabel class={styles["value-label"]} />
      </div>
      <Slider.Track class={styles.track}>
        <Slider.Fill class={styles.fill} />
        <Slider.Thumb class={styles.thumb}>
          <Slider.Input />
        </Slider.Thumb>
      </Slider.Track>
    </Slider.Root>
  )
}

.root {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 12rem;
  user-select: none;
  touch-action: none;
}

.root[data-orientation="vertical"] {
  height: 12rem;
  width: auto;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.label {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: var(--color-gray-900);
}

.value-label {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--color-gray-900);
}

.track {
  position: relative;
  height: 0.25rem;
  width: 100%;
  border-radius: 9999px;
  background-color: var(--color-gray-200);
}

.track[data-orientation="vertical"] {
  width: 0.25rem;
  height: 100%;
}

.fill {
  position: absolute;
  height: 100%;
  border-radius: 9999px;
  background-color: var(--color-gray-700);
}

.fill[data-orientation="vertical"] {
  width: 100%;
  height: unset;
}

.thumb {
  display: block;
  width: 1rem;
  height: 1rem;
  border-radius: 100%;
  background-color: white;
  border: none;
  outline: 1px solid var(--color-gray-300);
  top: -0.375rem;
}

.thumb[data-orientation="vertical"] {
  left: -0.375rem;
  top: unset;
}

.thumb:hover,
.thumb:focus-visible {
  outline: 1px solid var(--color-gray-400);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-gray-400) 30%, transparent);
}

.thumb[data-disabled] {
  opacity: 0.5;
}

:root {
  --color-blue: oklch(45% 50% 264deg);
  --color-red: oklch(50% 55% 31deg);
  --color-gray-50: oklch(98% 0.25% 264deg);
  --color-gray-100: oklch(12% 9.5% 264deg / 5%);
  --color-gray-200: oklch(12% 9% 264deg / 7%);
  --color-gray-300: oklch(12% 8.5% 264deg / 17%);
  --color-gray-400: oklch(12% 8% 264deg / 38%);
  --color-gray-500: oklch(12% 7.5% 264deg / 50%);
  --color-gray-600: oklch(12% 7% 264deg / 67%);
  --color-gray-700: oklch(12% 6% 264deg / 77%);
  --color-gray-800: oklch(12% 5% 264deg / 85%);
  --color-gray-900: oklch(12% 5% 264deg / 90%);
  --color-gray-950: oklch(12% 5% 264deg / 95%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-blue: oklch(69% 50% 264deg);
    --color-red: oklch(80% 55% 31deg);
    --color-gray-50: oklch(17% 0.25% 264deg);
    --color-gray-100: oklch(28% 0.75% 264deg / 65%);
    --color-gray-200: oklch(29% 0.75% 264deg / 80%);
    --color-gray-300: oklch(35% 0.75% 264deg / 80%);
    --color-gray-400: oklch(47% 0.875% 264deg / 80%);
    --color-gray-500: oklch(64% 1% 264deg / 80%);
    --color-gray-600: oklch(82% 1% 264deg / 80%);
    --color-gray-700: oklch(92% 1.125% 264deg / 80%);
    --color-gray-800: oklch(93% 0.875% 264deg / 85%);
    --color-gray-900: oklch(95% 0.5% 264deg / 90%);
    --color-gray-950: oklch(94% 0.375% 264deg / 95%);
  }
}