/*! For license information please see 8796.15546f93.js.LICENSE.txt */ (self.webpackChunk=self.webpackChunk||[]).push([["8796"],{50244:function(s,n,a){"use strict";a.r(n);var t=a("80681");let e=["innerHTML"];n.default={setup:()=>({html:""}),render:()=>((0,t.wg)(),(0,t.iD)("div",{class:"van-doc-markdown-body",innerHTML:'

Slider

\n

Intro

\n

Used to select a value within a given range.

\n

Install

\n

Register component globally via app.use, refer to Component Registration for more registration ways.

\n
import { createApp } from 'vue';\nimport { Slider } from 'vant';\n\nconst app = createApp();\napp.use(Slider);\n
\n

Usage

\n

Basic Usage

\n
<van-slider v-model="value" @change="onChange" />\n
\n
import { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n  setup() {\n    const value = ref(50);\n    const onChange = (value) => showToast('Current value: ' + value);\n    return {\n      value,\n      onChange,\n    };\n  },\n};\n
\n

Dual thumb

\n

Add range attribute to open dual thumb mode.

\n
<van-slider v-model="value" range @change="onChange" />\n
\n
import { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n  setup() {\n    // value must be an Array\n    const value = ref([10, 50]);\n    const onChange = (value) => showToast('Current value: ' + value);\n    return {\n      value,\n      onChange,\n    };\n  },\n};\n
\n

Range

\n
<van-slider v-model="value" :min="-50" :max="50" />\n
\n

Disabled

\n
<van-slider v-model="value" disabled />\n
\n

Step size

\n
<van-slider v-model="value" :step="10" />\n
\n

Custom style

\n
<van-slider v-model="value" bar-height="4px" active-color="#ee0a24" />\n
\n

Custom button

\n
<van-slider v-model="value">\n  <template #button>\n    <div class="custom-button">{{ value }}</div>\n  </template>\n</van-slider>\n\n<style>\n  .custom-button {\n    width: 26px;\n    color: #fff;\n    font-size: 10px;\n    line-height: 18px;\n    text-align: center;\n    background-color: var(--van-primary-color);\n    border-radius: 100px;\n  }\n</style>\n
\n

Vertical

\n
<div :style="{ height: '150px' }">\n  <van-slider v-model="value" vertical @change="onChange" />\n  <van-slider\n    v-model="value2"\n    range\n    vertical\n    style="margin-left: 100px;"\n    @change="onChange"\n  />\n</div>\n
\n
import { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n  setup() {\n    const value = ref(50);\n    const value2 = ref([10, 50]);\n    const onChange = (value) => showToast('Current value: ' + value);\n    return {\n      value,\n      value2,\n      onChange,\n    };\n  },\n};\n
\n

API

\n

Props

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AttributeDescriptionTypeDefault
v-modelCurrent valuenumber | [number, number]0
maxMax valuenumber | string100
minMin valuenumber | string0
stepStep sizenumber | string1
bar-heightHeight of barnumber | string2px
button-sizeButton sizenumber | string24px
active-colorActive color of barstring#1989fa
inactive-colorInactive color of barstring#e5e5e5
rangeWhether to enable dual thumb modebooleanfalse
reverseWhether to reverse sliderbooleanfalse
disabledWhether to disable sliderbooleanfalse
readonlyWhether to be readonlybooleanfalse
verticalWhether to display slider verticallybooleanfalse
\n

Events

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
EventDescriptionArguments
update:model-valueEmitted when value is changingvalue: number
changeEmitted after value changedvalue: number
drag-startEmitted when start draggingevent: TouchEvent
drag-endEmitted when end draggingevent: TouchEvent
\n

Slots

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDescriptionSlotProps
buttonCustom button{ value: number, dragging: boolean }
left-buttonCustom left button in range mode{ value: number, dragging: boolean, dragIndex?: number }
right-buttonCustom right button in range mode{ value: number, dragging: boolean, dragIndex?: number }
\n

Types

\n

The component exports the following type definitions:

\n
import type { SliderProps } from 'vant';\n
\n

Theming

\n

CSS Variables

\n

The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDefault ValueDescription
--van-slider-active-backgroundvar(--van-primary-color)-
--van-slider-inactive-backgroundvar(--van-gray-3)-
--van-slider-disabled-opacityvar(--van-disabled-opacity)-
--van-slider-bar-height2px-
--van-slider-button-width24px-
--van-slider-button-height24px-
--van-slider-button-radius50%-
--van-slider-button-backgroundvar(--van-white)-
--van-slider-button-shadow0 1px 2px rgba(0, 0, 0, 0.5)-
\n
'},null,8,e))}}}]);