```ts import Slider from "~/components/ui/Slider.vue"; ``` # Slider Let a user select a value along a gradient. The model (required) is the current value. ```ts const options = { me: "Only I can find and edit this", pod: "Me and other users on the instance can find and edit this", everyone: "Everyone can find and edit this", } as const; const option = ref("me"); ``` ```vue-html ``` Functionality: - Define a list of `[value:string, description:markdown]` pairs (props) - Select one value as active (model) User interaction: - It mimics the functionality of a single `range` input: - to be operated with arrow keys or mouse - focus is indicated - ticks are indicated Design: - A pin (same as in the toggle component) - a range (very faint) - Ticks - Not to be confused with a pearls navigation patterns (list of dots; indicates temporal range)