el-slider

Slider Component

Slider component allows users to drag a slider within a fixed range to select values.

When to Use

• Numeric range selection
• Volume/brightness controls
• Price range filters
• Progress indicators

Basic Usage

<template>
  <el-slider v-model="value" />
</template>

## Discrete Values

```vue
<template>
  <el-slider v-model="value" :step="10" show-stops />
</template>

With Input Box

<template>
  <el-slider v-model="value" show-input />
</template>

Range Selection

<template>
  <el-slider v-model="range" range :max="1000" />
</template>

<script setup>
import { ref } from 'vue'

const range = ref([100, 500])
</script>

Vertical Mode

<template>
  <el-slider v-model="value" vertical height="200px" />
</template>

Show Marks

<template>
  <el-slider v-model="value" :marks="marks" />
</template>

<script setup>
import { ref } from 'vue'

const value = ref(30)
const marks = {
  0: '0°C',
  8: '8°C',
  37: '37°C',
  100: '100°C'
}
</script>

API Reference

Attributes

Name	Description	Type	Default
model-value / v-model	Binding value	number | number[]	0
min	Minimum value	number	0
max	Maximum value	number	100
disabled	Whether disabled	boolean	false
step	Step size	number | 'mark'	1
show-input	Show input box	boolean	false
show-input-controls	Show input controls	boolean	true
size	Size	'' | 'large' | 'default' | 'small'	'default'
show-stops	Show breakpoints	boolean	false
show-tooltip	Show tooltip	boolean	true
range	Enable range mode	boolean	false
vertical	Vertical mode	boolean	false
height	Height (vertical mode)	string	—
marks	Marks	SliderMarks	—
placement	Tooltip position	Placement enum	'top'

Events

Name	Description	Type
change	Triggers on value change	(value: number | number[]) => void
input	Triggers during sliding	(value: number | number[]) => void

Best Practices

1. Use marks for labeled intervals
2. Use range for min/max selection
3. Use step="mark" to restrict to mark values