Slider 滑块

Form · Interactive component

Range value selection.

On-demand importwbbb-ui/components/slider

Basic Usage

Example code

<script setup lang="ts">
import { ref } from 'vue'
import { WbbbSlider } from 'wbbb-ui/components/slider'
import 'wbbb-ui/styles/slider'

const value = ref('')
</script>

<template>
  <WbbbSlider v-model="value" />
</template>

Live mobile previewOpen in a new tab ↗

States and Interaction

All listed states can be operated and verified in the live Playground preview.

DefaultFilledFocusDisabledError

API Reference

Props

Property	Description	Type	Default	Required
activeColor	Sets the color used by the active state.	string	''	No
disabled	Prevents user interaction with the component.	boolean	false	No
max	Sets the maximum allowed numeric value.	number	100	No
min	Sets the minimum allowed numeric value.	number	0	No
modelValue	Provides the current value used by v-model.	number	0	No
showValue	Controls whether the current value is displayed.	boolean	false	No
step	Sets the increment used when changing a numeric value.	number	1	No

Events

• update:modelValue
• change
• changing

Slots

None

Two-way binding

Supports v-model (modelValue).

Platform Notes

Build verification: H5, App Vue, WeChat Mini Program, Alipay Mini Program, and Douyin Mini Program.

Runtime differences: H5 supports keyboard focus and reduced motion. Mini Programs provide equivalent touch interaction; verify upload, date selection, and overlays on target platforms.

Usage note: Use Playground to verify further state combinations and cross-platform behavior.