Slider

'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 '~/lib/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 '~/lib/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

'use client'
import { type ReactNode, forwardRef } from 'react'
import { Slider as ArkSlider } from '~/components/ui/primitives'

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

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

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

Slider.displayName = 'Slider'

import { Index, type JSX, Show, children, splitProps } from 'solid-js'
import { Slider as ArkSlider } from '~/components/ui/primitives'

export interface SliderProps extends ArkSlider.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 (
    <ArkSlider.Root {...rootProps}>
      <ArkSlider.Context>
        {(slider) => (
          <>
            <Show when={getChildren()}>
              <ArkSlider.Label>{getChildren()}</ArkSlider.Label>
            </Show>
            <ArkSlider.Control>
              <ArkSlider.Track>
                <ArkSlider.Range />
              </ArkSlider.Track>
              <Index each={slider().value}>
                {(_, index) => (
                  <ArkSlider.Thumb index={index}>
                    <ArkSlider.HiddenInput />
                  </ArkSlider.Thumb>
                )}
              </Index>
            </ArkSlider.Control>
            <Show when={localProps.marks}>
              <ArkSlider.MarkerGroup>
                <Index each={localProps.marks}>
                  {(mark) => (
                    <ArkSlider.Marker value={mark().value}>{mark().label}</ArkSlider.Marker>
                  )}
                </Index>
              </ArkSlider.MarkerGroup>
            </Show>
          </>
        )}
      </ArkSlider.Context>
    </ArkSlider.Root>
  )
}