Slider

An input to select a numeric value within a range.

Usage

Use the v-model directive to control the value of the Slider.

modelValue

<script setup lang="ts">
const value = ref(50)
</script>

<template>
  <PSlider v-model="value" />
</template>

Use the default-value prop to set the initial value when you do not need to control its state.

<template>
  <PSlider :default-value="50" />
</template>

Min / Max

Use the min and max props to set the minimum and maximum values of the Slider. Defaults to 0 and 100.

min

max

<template>
  <PSlider :min="0" :max="50" :default-value="50" />
</template>

Step

Use the step prop to set the increment value of the Slider. Defaults to 1.

step

<template>
  <PSlider :step="10" :default-value="50" />
</template>

Multiple

Use the v-model directive or the default-value prop with an array of values to create a range Slider.

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

<template>
  <PSlider v-model="value" />
</template>

Use the min-steps-between-thumbs prop to limit the minimum distance between the thumbs.

minStepsBetweenThumbs

<script setup lang="ts">
const value = ref([
  25,
  50,
  75
])
</script>

<template>
  <PSlider v-model="value" :min-steps-between-thumbs="10" />
</template>

Orientation

Use the orientation prop to change the orientation of the Slider. Defaults to horizontal.

orientation

<template>
  <PSlider orientation="vertical" :default-value="50" class="akar:h-48" />
</template>

Color

Use the color prop to change the color of the Slider.

color

<template>
  <PSlider color="neutral" :default-value="50" />
</template>

Size

Use the size prop to change the size of the Slider.

size

<template>
  <PSlider size="xl" :default-value="50" />
</template>

Use the tooltip prop to display a Tooltip around the Slider thumbs with the current value. You can set it to true for default behavior or pass an object to customize it with any property from the Tooltip component.

<template>
  <PSlider :default-value="50" tooltip />
</template>

Disabled

Use the disabled prop to disable the Slider.

disabled

<template>
  <PSlider disabled :default-value="50" />
</template>

Inverted

Use the inverted prop to visually invert the Slider.

inverted

<template>
  <PSlider inverted :default-value="25" />
</template>

API

Props

Prop	Default	Type
`as`	`'div'`	`any` The element or component this component should render as.
`size`	`'md'`	`"md" \| "xs" \| "sm" \| "lg" \| "xl"`
`color`	`'primary'`	`"primary" \| "secondary" \| "success" \| "info" \| "warning" \| "error" \| "neutral"`
`orientation`	`'horizontal'`	`"horizontal" \| "vertical"` The orientation of the slider.
`tooltip`	`false`	`boolean \| PTooltipProps` Display a tooltip around the slider thumbs with the current value. `{ disableClosingTrigger: true }`
`defaultValue`		`number \| number[]` The value of the slider when initially rendered. Use when you do not need to control the state of the slider.
`name`		`string` The name of the field. Submitted with its owning form as part of a name/value pair.
`min`	`0`	`number` The minimum value for the range.
`max`	`100`	`number` The maximum value for the range.
`step`	`1`	`number` The stepping interval.
`minStepsBetweenThumbs`		`number` The minimum permitted steps between multiple thumbs.
`modelValue`		`T`
`disabled`		`boolean` When `true`, prevents the user from interacting with the slider.
`inverted`		`boolean` Whether the slider is visually inverted.
`pohon`		`{ root?: ClassValue; track?: ClassValue; range?: ClassValue; thumb?: ClassValue; }`

Emits

Event	Type
`change`	`[event: Event]`
`update:modelValue`	`[value: T]`

Theme

We use unocss-variants to customize the theme. Read more about it in the theming guide.

Below is the theme configuration skeleton for the PSlider. Since the component is provided unstyled by default, you will need to fill in these values to apply your own custom look and feel. If you prefer to use our pre-built, opinionated styling, you can instead use our UnoCSS preset, this docs is using it as well.

app.config.ts

export default defineAppConfig({
  pohon: {
    slider: {
      slots: {
        root: '',
        track: '',
        range: '',
        thumb: ''
      },
      variants: {
        color: {
          primary: {
            range: '',
            thumb: ''
          },
          secondary: {
            range: '',
            thumb: ''
          },
          success: {
            range: '',
            thumb: ''
          },
          info: {
            range: '',
            thumb: ''
          },
          warning: {
            range: '',
            thumb: ''
          },
          error: {
            range: '',
            thumb: ''
          },
          neutral: {
            range: '',
            thumb: ''
          }
        },
        size: {
          xs: {
            thumb: ''
          },
          sm: {
            thumb: ''
          },
          md: {
            thumb: ''
          },
          lg: {
            thumb: ''
          },
          xl: {
            thumb: ''
          }
        },
        orientation: {
          horizontal: {
            root: '',
            range: ''
          },
          vertical: {
            root: '',
            range: ''
          }
        },
        disabled: {
          true: {
            root: ''
          }
        }
      },
      compoundVariants: [],
      defaultVariants: {
        size: 'md',
        color: 'primary'
      }
    }
  }
};

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import pohon from 'pohon-ui/vite'

export default defineAppConfig({
  pohon: {
    slider: {
      slots: {
        root: '',
        track: '',
        range: '',
        thumb: ''
      },
      variants: {
        color: {
          primary: {
            range: '',
            thumb: ''
          },
          secondary: {
            range: '',
            thumb: ''
          },
          success: {
            range: '',
            thumb: ''
          },
          info: {
            range: '',
            thumb: ''
          },
          warning: {
            range: '',
            thumb: ''
          },
          error: {
            range: '',
            thumb: ''
          },
          neutral: {
            range: '',
            thumb: ''
          }
        },
        size: {
          xs: {
            thumb: ''
          },
          sm: {
            thumb: ''
          },
          md: {
            thumb: ''
          },
          lg: {
            thumb: ''
          },
          xl: {
            thumb: ''
          }
        },
        orientation: {
          horizontal: {
            root: '',
            range: ''
          },
          vertical: {
            root: '',
            range: ''
          }
        },
        disabled: {
          true: {
            root: ''
          }
        }
      },
      compoundVariants: [],
      defaultVariants: {
        size: 'md',
        color: 'primary'
      }
    }
  }
};

Akar

With Pohon UI, you can achieve similar component functionality with less code and effort, as it comes with built-in styles mechanism and behaviors that are optimized for common use cases. Since it's using unocss-variants it adds a runtime cost, but it can be worth it if you prioritize development speed and ease of use over fine-grained control.

If this is a deal breaker for you, you can always stick to using Akar and build your own custom components on top of it.

Changelog

No recent changes

SelectMenu

An advanced searchable select element.

Switch

A control that toggles between two states.