funkwhale/front/ui-docs/components/ui/slider.md

import Slider from "~/components/ui/Slider.vue"

Slider

Let a user select a value along a line.

For each option, provide a description. Markdown is supported. Select a key from the options by setting v-model

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<keyof typeof options>("me");

<Slider :options="options" v-model="option" label="Privacy level" />

Add a label

You can either specify the label prop or add custom Html into the #label slot.

Autofocus

Add the prop autofocus to focus the slider as soon as it renders. Make sure to only autofocus one element per page.

Undefined state

If you want to aggregate potentially mixed states, or start with no initial selection, you can set v-model to undefined.

const optionWithUndefined = ref<keyof typeof options | undefined>(undefined)

<Slider
  v-model="optionWithUndefined"
  label="Privacy level?"
  :options="options"
/>

---

Functionality

• Define a possible values
• Select zero or one values as active (v-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?

• Constant dimensions, fitting the largest text box

• Not to be confused with a pearls navigation patterns (list of dots; indicates temporal range)