Press UI

# Slider

A sliding input bar for selecting a value within a given range.

# Code Demo

# Basic Usage

<press-slider value="50" @change="onChange" />

export default{
   onChange(value) {
     this.$toast(`Current value: ${value}`);
   },
};

# Double Slider

Add the range attribute to enable the dual slider mode, and ensure that the value of value is an array.

<press-slider :value="[10, 50]" range @change="onChange" />

# Specify the selection range

<press-slider min="-50" max="50" />

# disable

<press-slider value="50" disabled />

# Specify the step size

<press-slider value="50" step="10" />

# Custom styles

<press-slider value="50" bar-height="4px" active-color="#ee0a24" />

# Custom button

<press-slider :value="currentValue" use-button-slot @drag="onDrag">
   <div class="custom-button" slot="button">{{ currentValue }}</div>
</press-slider>

export default {
   data() {
     return {
       currentValue: 50,
     }
   },
   onDrag(value) {
     this. currentValue = value;
   },
};

# Vertical direction

After setting the vertical attribute, the slider will be displayed vertically with a height of 100% of the height of the parent element.

<div style="height: 150px;">
   <press-slider value="50" vertical @change="onChange" />
   <press-slider
     :value="[10, 50]"
     range
     vertical
     style="margin-left: 100px;"
     @change="onChange"
   />
</div>

# API

# Props

Parameter Description Type Default
value current progress in percentage, in array format in double slider mode number | number[] 0
disabled Whether to disable the slider boolean false
max maximum value number 100
min minimum value number 0
step step size number 1
bar-height progress bar height, the default unit is px string | number 2px
active-color Active color of the progress bar string #1989fa
inactive-color Default color of progress bar string #e5e5e5
use-slot-button Whether to use the button slot boolean false
range Whether to enable double slider mode boolean false
vertical Whether to display vertically boolean false

# Events

Event Name Description Parameters
drag Triggered when dragging the progress bar event.detail.value: current progress
change Triggered when the progress value changes event.detail: current progress
drag-start Triggered when dragging starts -
drag-end Triggered when drag ends -

# External style classes

class name description
custom-class root node style class

# Slots

Name Description Parameters
button custom slider button { value: number }
left-button Custom left slider button (in double slider mode) { value: number }
right-button Customize the right slider button (in double slider mode) { value: number }

# Theme customization

--slider-active-background-color：
--slider-inactive-background-color：
--slider-disabled-opacity：
--slider-bar-height：
--slider-button-width：
--slider-button-height：
--slider-button-border-radius：
--slider-button-background-color：
--slider-button-box-shadow：
横屏

← Stepper →