Slider

<Slider
  className="sm:w-80"
  defaultValue={[25]}
  hint="Some contextual help here"
  label="Choose a value"
/>

<Slider.Root className="sm:w-80" defaultValue={[25]}>
  <Slider.Label>Choose a value</Slider.Label>
  <Slider.ValueText />
  <Slider.Control>
    <Slider.Track>
      <Slider.Range />
    </Slider.Track>
    <Slider.Thumbs />
  </Slider.Control>
  <Slider.Hint>Some contextual help here</Slider.Hint>
  <Slider.Markers />
</Slider.Root>

<Slider
  className="sm:w-80"
  defaultValue={[50]}
  max={70}
  min={20}
  step={5}
/>

<Slider
  className="sm:w-80"
  defaultValue={[50]}
  label="Start (default)"
  origin="start"
/>
<Slider
  className="sm:w-80"
  defaultValue={[50]}
  label="Center"
  origin="center"
/>
<Slider
  className="sm:w-80"
  defaultValue={[50]}
  label="End"
  origin="end"
/>

<Slider className="mt-3 sm:w-80" defaultValue={[25]} tooltip />

<Slider className="sm:w-80" defaultValue={[20, 50]} />

import type {ReactElement} from "react"

import {Slider} from "@qualcomm-ui/react/slider"

export function SliderSizeDemo(): ReactElement {
  return <Slider className="sm:w-80" defaultValue={[50]} size="sm" />
}

<Slider className="sm:w-80" defaultValue={[50]} variant="neutral" />

<Slider className="sm:w-80" defaultValue={[50]} hint="Additional context" />

<Slider className="sm:w-80" defaultValue={[50]} disabled />

<Slider
  defaultValue={[25, 75]}
  onFocusChange={(e) => {
    setCurrentOutput(
      e.focusedIndex === -1 ? "none" : `thumb ${e.focusedIndex}`,
    )
  }}
/>

<Slider
  onValueChange={(e) => {
    setValue(e.value)
  }}
  onValueChangeEnd={(e) => {
    setFinalValue(e.value)
  }}
  value={value}
/>

import type {ReactElement} from "react"

import {arktypeResolver} from "@hookform/resolvers/arktype"
import {type} from "arktype"
import {Controller, useForm} from "react-hook-form"

import {Button} from "@qualcomm-ui/react/button"
import {Slider} from "@qualcomm-ui/react/slider"

interface FormData {
  minMaxNumber: number
  minRange: [number, number]
}

const minMaxNumber = type("20 <= number <= 80").configure({
  message: "Value must be between 20 and 80",
})

const minRange = type(["number", "number"])
  .narrow((values: [number, number]) => Math.abs(values[0] - values[1]) >= 30)
  .configure({
    message: "Range must be at least 30",
  })

const FormSchema = type({
  minMaxNumber,
  minRange,
})

export function SliderReactHookFormDemo(): ReactElement {
  const {control, handleSubmit} = useForm<FormData>({
    defaultValues: {
      minMaxNumber: 30,
      minRange: [30, 70],
    },
    mode: "onChange",
    resolver: arktypeResolver(FormSchema),
  })

  return (
    <form
      className="flex flex-col gap-10 sm:w-80"
      onSubmit={(e) => {
        void handleSubmit((data) => console.log(data))(e)
      }}
    >
      <Controller
        control={control}
        name="minMaxNumber"
        render={({
          field: {onChange, value, ...fieldProps},
          fieldState: {error},
        }) => {
          return (
            <Slider
              errorText={error?.message}
              hint="Between 20 and 80"
              invalid={!!error?.message}
              label="Select a value"
              onValueChange={({value}: {value: number[]}) => {
                return onChange(value[0])
              }}
              value={[value]}
              {...fieldProps}
            />
          )
        }}
      />
      <Controller
        control={control}
        name="minRange"
        render={({
          field: {onChange, value, ...fieldProps},
          fieldState: {error},
        }) => {
          return (
            <Slider
              errorText={error?.message}
              hint="At least 30"
              invalid={!!error?.message}
              label="Select a range"
              onValueChange={({value}: {value: number[]}) => {
                return onChange(value)
              }}
              value={value}
              {...fieldProps}
            />
          )
        }}
      />
      <Button
        className="mt-1"
        emphasis="primary"
        size="sm"
        type="submit"
        variant="fill"
      >
        Submit
      </Button>
    </form>
  )
}

import type {ReactElement} from "react"

import {useForm} from "@tanstack/react-form"

import {Button} from "@qualcomm-ui/react/button"
import {Slider} from "@qualcomm-ui/react/slider"

interface FormData {
  minMaxNumber: number
  minRange: [number, number]
}

const defaultFormData: FormData = {
  minMaxNumber: 30,
  minRange: [30, 70],
}

const minmaxErrorMessage = "Value must be between 20 and 80"
const minRangeErrorMessage = "Range must be at least 30"

export function SliderTanstackFormDemo(): ReactElement {
  const form = useForm({
    defaultValues: defaultFormData,
    onSubmit: (data) => console.log(data.value),
  })

  const isInRange = (value: number) => value >= 20 && value <= 80
  const isRangeAtLeast30 = (value: [number, number]) =>
    Math.abs(value[0] - value[1]) >= 30

  return (
    <form
      className="flex flex-col gap-10 sm:w-80"
      onSubmit={(event) => {
        event.preventDefault()
        event.stopPropagation()
        void form.handleSubmit()
      }}
    >
      <form.Field
        name="minMaxNumber"
        validators={{
          onChange: ({value}) =>
            isInRange(value) ? undefined : minmaxErrorMessage,
          onSubmit: ({value}) =>
            isInRange(value) ? undefined : minmaxErrorMessage,
        }}
      >
        {({handleChange, name, state}) => {
          const fieldError =
            state.meta.errorMap["onChange"] || state.meta.errorMap["onSubmit"]
          return (
            <Slider
              errorText={fieldError}
              hint="Between 20 and 80"
              invalid={!!fieldError}
              label="Select a value"
              name={name}
              onValueChange={({value}) => handleChange(value[0])}
              value={[state.value]}
            />
          )
        }}
      </form.Field>
      <form.Field
        name="minRange"
        validators={{
          onChange: ({value}) =>
            isRangeAtLeast30(value) ? undefined : minRangeErrorMessage,
          onSubmit: ({value}) =>
            isRangeAtLeast30(value) ? undefined : minRangeErrorMessage,
        }}
      >
        {({handleChange, name, state}) => {
          const fieldError =
            state.meta.errorMap["onChange"] || state.meta.errorMap["onSubmit"]
          return (
            <Slider
              errorText={fieldError}
              hint="At least 30"
              invalid={!!fieldError}
              label="Select a range"
              name={name}
              onValueChange={({value}) =>
                handleChange(value as [number, number])
              }
              value={state.value}
            />
          )
        }}
      </form.Field>
      <Button
        className="mt-1"
        emphasis="primary"
        size="sm"
        type="submit"
        variant="fill"
      >
        Submit
      </Button>
    </form>
  )
}