Slidebar

Brief Introduction

The slidebar slider component is used for users to select a value within a range by dragging a slider.
You can use <MYSlidebar></MYSlidebar> or <MYSlidebar /> to implement a slider.

Basic Usage

Use v-model to bind the slider's value.

Code Demo

0

<template>
    <MYSlidebar v-model='sliderValue1' />
</template>

展开代码

Custom Thumb Color

Use the thumbColor property to customize the color of the slider thumb.

Code Demo

0

<template>
    <MYSlidebar v-model='sliderValue2' thumbColor='#ff0000' />
</template>

展开代码

Custom Track Color

Use the trackColor property to customize the color of the slider track.

Code Demo

0

<template>
    <MYSlidebar v-model='sliderValue3' trackColor='#00ff00' />
</template>

展开代码

Disabled State

Use the disabled property to disable the slider.

Code Demo

0

<template>
    <MYSlidebar v-model='sliderValue4' disabled />
</template>

展开代码

Hide Numeric Value

Use the noNum property to hide the slider's numeric value display.

Code Demo

<template>
    <MYSlidebar v-model='sliderValue5' noNum />
</template>

展开代码

Custom Size

Use the size property to customize the size of the slider.

Code Demo

0

<template>
    <MYSlidebar v-model='sliderValue6' size='500px' />
</template>

展开代码

Combined Usage

Finally, combine multiple APIs to create a customized slider:

Code Demo

<template>
    <MYSlidebar 
        v-model='sliderValue7' 
        size='400px'
        thumbColor='#8d4dd1'
        trackColor='#e6f3ff'
        noNum
    />
</template>

展开代码

API Reference

Props

Parameter	Description	Type	Options	Default
modelValue	Bound value	number	—	0
size	Slider size	string	px / rem / em / % / dynamic binding	—
thumbColor	Thumb color	string	Supports hex colors or named colors	—
trackColor	Track color	string	Supports hex colors or named colors	—
disabled	Whether disabled	boolean	—	false
noNum	Whether to hide number	boolean	—	false

Type Definition

interface SlidebarProps {
  modelValue?: number;
  size?: string;
  thumbColor?: string;
  trackColor?: string;
  disabled?: boolean;
  noNum?: boolean;
}