Components

Slider

A control element that allows for a range of selections.

size: md

import { Slider, type SliderProps } from '~/components/ui/slider'

export const Demo = (props: SliderProps) => {
  return (
    <Slider
      value={[33]}
      marks={[
        { value: 25, label: '25' },
        { value: 50, label: '50' },
        { value: 75, label: '75' },
      ]}
      {...props}
    />
  )
}

import { Slider, type SliderProps } from '~/components/ui/slider'

export const Demo = (props: SliderProps) => {
  return (
    <Slider
      value={[33]}
      marks={[
        { value: 25, label: '25' },
        { value: 50, label: '50' },
        { value: 75, label: '75' },
      ]}
      {...props}
    />
  )
}

Usage

import { Slider } from '~/components/ui/slider'

Examples

Range Slider

To use the slider as a range slider, you need to provide an array of values.

Label

<Slider value={[33, 66]}>Label</Slider>

Unlabeled

The slider can also be used without a label while still showing indicators within the track.

<Slider
  defaultValue={[33]}
  marks={[{ value: 0 }, { value: 25 }, { value: 50 }, { value: 75 }, { value: 100 }]}
/>

Installation

npx @park-ui/cli components add slider

1

Add Styled Primitive

Copy the code snippet below into ~/components/ui/styled/slider.tsx

'use client'
import type { Assign } from '@ark-ui/react'
import { Slider } from '@ark-ui/react/slider'
import { type SliderVariantProps, slider } from 'styled-system/recipes'
import type { ComponentProps, HTMLStyledProps } from 'styled-system/types'
import { createStyleContext } from './utils/create-style-context'

const { withProvider, withContext } = createStyleContext(slider)

export type RootProviderProps = ComponentProps<typeof RootProvider>
export const RootProvider = withProvider<
  HTMLDivElement,
  Assign<Assign<HTMLStyledProps<'div'>, Slider.RootProviderBaseProps>, SliderVariantProps>
>(Slider.RootProvider, 'root')

export type RootProps = ComponentProps<typeof Root>
export const Root = withProvider<
  HTMLDivElement,
  Assign<Assign<HTMLStyledProps<'div'>, Slider.RootBaseProps>, SliderVariantProps>
>(Slider.Root, 'root')

export const Control = withContext<
  HTMLDivElement,
  Assign<HTMLStyledProps<'div'>, Slider.ControlBaseProps>
>(Slider.Control, 'control')

export const Label = withContext<
  HTMLLabelElement,
  Assign<HTMLStyledProps<'label'>, Slider.LabelBaseProps>
>(Slider.Label, 'label')

export const MarkerGroup = withContext<
  HTMLDivElement,
  Assign<HTMLStyledProps<'div'>, Slider.MarkerGroupBaseProps>
>(Slider.MarkerGroup, 'markerGroup')

export const Marker = withContext<
  HTMLSpanElement,
  Assign<HTMLStyledProps<'span'>, Slider.MarkerBaseProps>
>(Slider.Marker, 'marker')

export const Range = withContext<
  HTMLDivElement,
  Assign<HTMLStyledProps<'div'>, Slider.RangeBaseProps>
>(Slider.Range, 'range')

export const Thumb = withContext<
  HTMLDivElement,
  Assign<HTMLStyledProps<'div'>, Slider.ThumbBaseProps>
>(Slider.Thumb, 'thumb')

export const Track = withContext<
  HTMLDivElement,
  Assign<HTMLStyledProps<'div'>, Slider.TrackBaseProps>
>(Slider.Track, 'track')

export const ValueText = withContext<
  HTMLDivElement,
  Assign<HTMLStyledProps<'span'>, Slider.ValueTextBaseProps>
>(Slider.ValueText, 'valueText')

export {
  SliderContext as Context,
  SliderHiddenInput as HiddenInput,
} from '@ark-ui/react/slider'

import { type Assign, Slider } from '@ark-ui/solid'
import type { ComponentProps } from 'solid-js'
import { type SliderVariantProps, slider } from 'styled-system/recipes'
import type { HTMLStyledProps } from 'styled-system/types'
import { createStyleContext } from './utils/create-style-context'

const { withProvider, withContext } = createStyleContext(slider)

export type RootProviderProps = ComponentProps<typeof RootProvider>
export const RootProvider = withProvider<
  Assign<Assign<HTMLStyledProps<'div'>, Slider.RootProviderBaseProps>, SliderVariantProps>
>(Slider.RootProvider, 'root')

export type RootProps = ComponentProps<typeof Root>
export const Root = withProvider<
  Assign<Assign<HTMLStyledProps<'div'>, Slider.RootBaseProps>, SliderVariantProps>
>(Slider.Root, 'root')

export const Control = withContext<Assign<HTMLStyledProps<'div'>, Slider.ControlBaseProps>>(
  Slider.Control,
  'control',
)

export const Label = withContext<Assign<HTMLStyledProps<'label'>, Slider.LabelBaseProps>>(
  Slider.Label,
  'label',
)

export const MarkerGroup = withContext<Assign<HTMLStyledProps<'div'>, Slider.MarkerGroupBaseProps>>(
  Slider.MarkerGroup,
  'markerGroup',
)

export const Marker = withContext<Assign<HTMLStyledProps<'span'>, Slider.MarkerBaseProps>>(
  Slider.Marker,
  'marker',
)

export const Range = withContext<Assign<HTMLStyledProps<'div'>, Slider.RangeBaseProps>>(
  Slider.Range,
  'range',
)

export const Thumb = withContext<Assign<HTMLStyledProps<'div'>, Slider.ThumbBaseProps>>(
  Slider.Thumb,
  'thumb',
)

export const Track = withContext<Assign<HTMLStyledProps<'div'>, Slider.TrackBaseProps>>(
  Slider.Track,
  'track',
)

export const ValueText = withContext<Assign<HTMLStyledProps<'span'>, Slider.ValueTextBaseProps>>(
  Slider.ValueText,
  'valueText',
)

export {
  SliderContext as Context,
  SliderHiddenInput as HiddenInput,
} from '@ark-ui/solid'

No snippet found

2

Add Composition

Copy the composition snippet below into ~/components/ui/slider.tsx

'use client'
import { type ReactNode, forwardRef } from 'react'
import * as StyledSlider from './styled/slider'

export interface SliderProps extends StyledSlider.RootProps {
  children?: ReactNode
  marks?: {
    value: number
    label?: ReactNode
  }[]
}

export const Slider = forwardRef<HTMLDivElement, SliderProps>((props, ref) => {
  const { children, marks, ...rootProps } = props

  return (
    <StyledSlider.Root ref={ref} {...rootProps}>
      <StyledSlider.Context>
        {(api) => (
          <>
            {children && <StyledSlider.Label>{children}</StyledSlider.Label>}
            <StyledSlider.Control>
              <StyledSlider.Track>
                <StyledSlider.Range />
              </StyledSlider.Track>
              {api.value.map((_, index) => (
                <StyledSlider.Thumb key={index} index={index}>
                  <StyledSlider.HiddenInput />
                </StyledSlider.Thumb>
              ))}
            </StyledSlider.Control>
            {props.marks && (
              <StyledSlider.MarkerGroup>
                {props.marks.map((mark) => (
                  <StyledSlider.Marker key={mark.value} value={mark.value}>
                    {mark.label}
                  </StyledSlider.Marker>
                ))}
              </StyledSlider.MarkerGroup>
            )}
          </>
        )}
      </StyledSlider.Context>
    </StyledSlider.Root>
  )
})

Slider.displayName = 'Slider'

import { Index, type JSX, Show, children, splitProps } from 'solid-js'
import * as StyledSlider from './styled/slider'

export interface SliderProps extends StyledSlider.RootProps {
  marks?: {
    value: number
    label?: JSX.Element
  }[]
}

export const Slider = (props: SliderProps) => {
  const [localProps, rootProps] = splitProps(props, ['children', 'marks'])
  const getChildren = children(() => localProps.children)

  return (
    <StyledSlider.Root {...rootProps}>
      <StyledSlider.Context>
        {(slider) => (
          <>
            <Show when={getChildren()}>
              <StyledSlider.Label>{getChildren()}</StyledSlider.Label>
            </Show>
            <StyledSlider.Control>
              <StyledSlider.Track>
                <StyledSlider.Range />
              </StyledSlider.Track>
              <Index each={slider().value}>
                {(_, index) => (
                  <StyledSlider.Thumb index={index}>
                    <StyledSlider.HiddenInput />
                  </StyledSlider.Thumb>
                )}
              </Index>
            </StyledSlider.Control>
            <Show when={localProps.marks}>
              <StyledSlider.MarkerGroup>
                <Index each={localProps.marks}>
                  {(mark) => (
                    <StyledSlider.Marker value={mark().value}>{mark().label}</StyledSlider.Marker>
                  )}
                </Index>
              </StyledSlider.MarkerGroup>
            </Show>
          </>
        )}
      </StyledSlider.Context>
    </StyledSlider.Root>
  )
}

3

Integrate Recipe

If you're not using @park-ui/preset, add the following recipe to yourpanda.config.ts:

import { sliderAnatomy } from '@ark-ui/anatomy'
import { defineSlotRecipe } from '@pandacss/dev'

export const slider = defineSlotRecipe({
  className: 'slider',
  slots: sliderAnatomy.keys(),
  base: {
    root: {
      colorPalette: 'accent',
      display: 'flex',
      flexDirection: 'column',
      gap: '1',
      width: 'full',
    },
    control: {
      position: 'relative',
      display: 'flex',
      alignItems: 'center',
    },
    track: {
      backgroundColor: 'bg.emphasized',
      borderRadius: 'full',
      overflow: 'hidden',
      flex: '1',
    },
    range: {
      background: 'colorPalette.default',
    },
    thumb: {
      background: 'bg.default',
      borderColor: 'colorPalette.default',
      borderRadius: 'full',
      borderWidth: '2px',
      boxShadow: 'sm',
      outline: 'none',
      zIndex: '1',
    },
    label: {
      color: 'fg.default',
      fontWeight: 'medium',
    },
    markerGroup: {
      mt: '-1',
    },
    marker: {
      '--before-background': {
        _light: 'white',
        _dark: 'colors.colorPalette.fg',
      },
      color: 'fg.muted',
      _before: {
        background: 'white',
        borderRadius: 'full',
        content: "''",
        display: 'block',
        left: '50%',
        position: 'relative',
        transform: 'translateX(-50%)',
      },
      _underValue: {
        _before: {
          background: 'var(--before-background)',
        },
      },
    },
  },
  defaultVariants: {
    size: 'md',
  },
  variants: {
    size: {
      sm: {
        control: {
          height: '4',
        },
        range: {
          height: '1.5',
        },
        track: {
          height: '1.5',
        },
        thumb: {
          height: '4',
          width: '4',
        },
        marker: {
          _before: {
            height: '1',
            top: '-2.5',
            width: '1',
          },
          textStyle: 'sm',
        },
        label: {
          textStyle: 'sm',
        },
      },
      md: {
        control: {
          height: '5',
        },
        range: {
          height: '2',
        },
        track: {
          height: '2',
        },
        thumb: {
          height: '5',
          width: '5',
        },
        marker: {
          _before: {
            height: '1',
            top: '-3',
            width: '1',
          },
          textStyle: 'sm',
        },
        label: {
          textStyle: 'sm',
        },
      },
      lg: {
        control: {
          height: '6',
        },
        range: {
          height: '2.5',
        },
        track: {
          height: '2.5',
        },
        thumb: {
          height: '6',
          width: '6',
        },
        marker: {
          _before: {
            height: '1.5',
            top: '-15px',
            width: '1.5',
          },
          textStyle: 'md',
        },
        label: {
          textStyle: 'md',
        },
      },
    },
  },
})

Make it yours