Important notes

1. get() returns strings

Use get(true) to get numeric values:

this.$refs.slider.get();     // → "50.00"
this.$refs.slider.get(true); // → 50

2. Vertical sliders need CSS height

<Slider
    v-model="value"
    :range="{ min: 0, max: 100 }"
    orientation="vertical"
    style="height: 200px"
/>

Without an explicit height, the vertical slider won't render correctly.

3. Connect with multiple handles

'lower' and 'upper' only work with 1 handle. For 2 or more handles, use a boolean array with length = handles + 1:

// 1 handle: string ok
connect: 'lower'

// 2 handles: array of 3
connect: [true, true, false]  // bar before and between, not after

// 3 handles: array of 4
connect: [false, true, true, false]  // bars between handles

4. reset() only resets values

reset() returns to the start values, but does not undo changes made via updateOptions (such as range or step changes).

5. v-model emits numeric values

update:modelValue always emits unformatted values, regardless of the configured format.

6. change does not fire with .set()

The change event only fires on direct user interaction. When calling .set() programmatically, only update and set are fired.

7. unconstrained returns values in original order

When handles cross each other with behaviour="unconstrained", values are returned in their original handle order (not sorted), even though they may appear visually reversed on the slider.

8. Step in non-linear ranges

The global step only applies to the first segment. In non-linear ranges, define step per segment:

range: {
    min: [0, 10],        // step of 10
    '50%': [500, 100],   // step of 100
    max: 1000
}

9. Pips are rendered as HTML

If you use user input in the pips formatter, you need to escape HTML to prevent XSS.