Slider

<script setup lang="ts">
const singleValue = ref([40])

const rangeValue = ref([40, 60, 150])
</script>

<template>
  <div class="grid cols-1 gap-8 py-4">
    <NSlider
      v-model="singleValue"
      :min="0"
      :max="100"
    />

    <NSlider
      v-model="rangeValue"
      :min="0"
      :max="150"
    />
  </div>
</template>

<script setup lang="ts">
const models = ref([
  [30],
  [40],
  [23],
  [49.40, 70],
  [10, 50],
  [29.40, 70],
  [90],
  [100],
  [50],
  [30],
])
</script>

<template>
  <div class="flex flex-wrap items-center gap-4">
    <NSeparator label="Dynamic Colors" />

    <NSlider
      v-model="models[0]"
    />

    <NSlider
      v-model="models[1]"
      slider="lime"
    />

    <NSlider
      v-model="models[2]"
      slider="orange"
    />

    <NSlider
      v-model="models[3]"
      slider="pink"
    />

    <NSlider
      v-model="models[4]"
      slider="purple"
    />

    <NSlider
      v-model="models[5]"
      slider="error"
    />

    <NSlider
      v-model="models[6]"
      slider="info"
    />

    <NSlider
      v-model="models[7]"
      slider="teal"
    />

    <NSeparator label="Static Colors" />

    <NSlider
      v-model="models[8]"
      slider="accent"
    />
  </div>
</template>

<script setup lang="ts">
const value = ref([40])

const multipleValue = ref([40, 55, 75])
</script>

<template>
  <div class="grid cols-1 gap-8 py-4">
    <NFormGroup
      label="Step size 10"
      :message="value.toString()"
    >
      <NSlider
        v-model="value"
        :step="10"
      />
    </NFormGroup>

    <NFormGroup
      label="Multiple Values"
      :message="multipleValue"
    >
      <NSlider
        v-model="multipleValue"
        :step="10"
        :min-steps-between-thumbs="1"
      />
    </NFormGroup>
  </div>
</template>

<script setup lang="ts">
const value = ref([40])

const isTooHigh = computed(() => value.value[0] > 50)
</script>

<template>
  <NFormField
    name="volume"
    label="Volume"
    required
    hint="Adjust the volume"
    :message="isTooHigh ? 'Volume is too high' : ''"
    :status="isTooHigh ? 'error' : undefined"
  >
    <NSlider
      v-model="value"
      :min="0"
      :max="100"
    />
  </NFormField>
</template>

<script setup lang="ts">
const value = ref([30])
</script>

<template>
  <div class="flex flex-col items-center space-y-4">
    <NFormGroup
      label="Vertical Slider"
      class="h-80"
    >
      <NSlider
        v-model="value"
        orientation="vertical"
        :min="0"
        :max="100"
        :step="5"
      />
    </NFormGroup>
    <NFormGroup
      label="Horizontal Slider"
      class="w-80"
    >
      <NSlider
        v-model="value"
        orientation="horizontal"
        :min="0"
        :max="100"
        :step="5"
      />
    </NFormGroup>
  </div>
</template>

<script setup lang="ts">
const models = ref([
  [20],
  [40],
  [60],
  [80],
  [100],
])
</script>

<template>
  <div class="flex flex-wrap items-center gap-8">
    <NSlider
      v-model="models[0]"
      size="sm"
    />

    <NSlider
      v-model="models[1]"
      size="md"
    />

    <NSlider
      v-model="models[2]"
      size="lg"
    />

    <NSlider
      v-model="models[3]"
      size="xl"
    />

    <NSlider
      v-model="models[4]"
      size="2xl"
    />
  </div>
</template>

<script setup lang="ts">
const equalizerValues = ref([
  [60],
  [50],
  [40],
  [30],
  [50],
  [40],
  [75],
  [85],
  [80],
  [50],
  [100],
  [40],
  [30],
])
</script>

<template>
  <div class="w-full flex flex-col overflow-auto border rounded-lg p-2 space-y-4">
    <div class="flex items-center justify-between">
      <div class="flex items-center gap-2">
        <NLabel
          for="equalizer"
        >
          Equalizer
        </NLabel>
        <NSwitch
          id="equalizer"
          default-value
          size="xs"
        />
      </div>

      <NButton
        btn="ghost"
        size="xs"
        label="Reset"
      />
    </div>

    <div class="relative flex justify-between space-x-2">
      <div class="absolute inset-x-0 w-full px-1">
        <NSeparator
          v-for="n in 7"
          :key="n"
        />
      </div>
      <template
        v-for="(_, key) in equalizerValues"
        :key="key"
      >
        <div class="w-10 flex flex-col items-center">
          <NSlider
            v-model="equalizerValues[key]"
            :slider="_[0] < 100 ? 'accent' : 'primary'"
            orientation="vertical"
            class="data-[orientation=vertical]:min-h-32"
            :una="{
              sliderTrack: 'rounded-none',
              sliderThumb: 'rounded-xs border-1 bg-white',
            }"
          />

          <small class="text-accent-foreground">
            {{ _[0] }}
          </small>
        </div>
      </template>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { SliderRootEmits } from 'reka-ui'
import type { NSliderProps } from '../../types'
import { reactiveOmit } from '@vueuse/core'
import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from 'reka-ui'
import { cn } from '../../utils'

const props = withDefaults(defineProps<NSliderProps>(), {
  slider: 'primary',
  size: 'md',
})
const emits = defineEmits<SliderRootEmits>()
const rootProps = reactiveOmit(props, ['class', 'una', 'slider'])
const forwarded = useForwardPropsEmits(rootProps, emits)
</script>

<template>
  <SliderRoot
    v-slot="{ modelValue }"
    data-slot="slider-root"
    :class="cn(
      'slider-root',
      props.class,
      props.una?.sliderRoot,
    )"
    v-bind="forwarded"
    :slider
    :size
  >
    <slot name="slider-track">
      <SliderTrack
        data-slot="slider-track"
        :class="cn(
          'slider-track',
          props.una?.sliderTrack,
        )"
        :size
      >
        <slot name="slider-range">
          <SliderRange
            data-slot="slider-range"
            :size
            :class="cn(
              'slider-range',
              props.una?.sliderRange,
            )"
          />
        </slot>
      </SliderTrack>
    </slot>

    <slot name="slider-thumb">
      <SliderThumb
        v-for="(_, key) in modelValue"
        :key="key"
        data-slot="slider-thumb"
        :size
        :class="cn(
          'slider-thumb',
          props.una?.sliderThumb,
        )"
      />
    </slot>
  </SliderRoot>
</template>