Slider

Matches Arco Slider with a thin track and round handle. See the Element Plus docs for props.

Basics & Disabled

Drag to change the value; disabled displays the disabled state.

<script setup lang="ts">
import { ref } from 'vue'
const value = ref(40)
</script>

<template>
  <div style="width: 100%; display: grid; gap: 20px">
    <el-slider v-model="value" />
    <el-slider :model-value="40" disabled />
  </div>
</template>

Range & Stops

Range selects an interval; show-stops retains Element Plus's stop layout.

<script setup lang="ts">
import { ref } from 'vue'
const value = ref([20, 60])
</script>

<template>
  <el-slider v-model="value" range :step="10" show-stops style="width: 100%" />
</template>

Differences from Arco

• Stops, marks and number inputs retain the Element Plus layout.