60 lines
1.3 KiB
Markdown
60 lines
1.3 KiB
Markdown
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
|
|
import Slider from '~/components/ui/Slider.vue'
|
|
|
|
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')
|
|
</script>
|
|
|
|
```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<keyof typeof options>("me");
|
|
```
|
|
|
|
```vue-html
|
|
<Slider :options="options" v-model="option" label="Privacy" />
|
|
```
|
|
|
|
<Slider :options="options" v-model="option" label="Privacy" />
|
|
|
|
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)
|