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>

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

const value = ref(50)
</script>

Discrete Values

<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

Events

Best Practices

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