شريط تمرير Slider

إدخال بالتمرير. يدعم min/max/step، وrange بشريطين، وعلامات marks، وإظهار القيمة عبر showInput، وثلاثة أحجام، والتعطيل؛ ويدعم السحب بالفأرة واللمس.

شريط التمرير

<template>
  <div class="demo-col" style="max-width: 520px; gap: 26px">
    <div>
      <LhSlider v-model="single" :min="0" :max="100" :step="5" show-input />
      <p class="demo-note">min=0 max=100 step=5 showInput: {{ single }}</p>
    </div>
    <div>
      <LhSlider v-model="ranged" range :min="10" :max="90" :step="10" />
      <p class="demo-note">range بشريطين: {{ JSON.stringify(ranged) }}</p>
    </div>
    <div>
      <LhSlider v-model="marked" :min="0" :max="100" :marks="marks" />
      <p class="demo-note">علامات marks: {{ marked }}</p>
    </div>
    <div>
      <LhSlider v-model="single" size="small" />
      <LhSlider v-model="single" disabled />
      <p class="demo-note">size="small" و disabled</p>
    </div>
  </div>
</template>

<script>
export default {
  data: () => ({
    single: 35,
    ranged: [20, 60],
    marked: 40,
    marks: { 0: 'بدء الفرشاة', 50: 'تحريك الفرشاة', 100: 'إنهاء الفرشاة' },
  }),
}
</script>

Props

خاصية	الوصف	النوع	الافتراضي
v-model	القيمة المرتبطة؛ في وضع range تكون [start, end] (model: modelValue/input)	number \| [number, number] \| null	—
min	الحد الأدنى	number	0
max	الحد الأقصى	number	100
step	قيمة الخطو	number	1
range	وضع الشريطين	boolean	false
marks	علامات التدريج { value: label }	Record<number, string>	—
showInput	إظهار نص القيمة	boolean	false
size	الحجم (ارتفاع المسار)	'small' \| 'medium' \| 'large'	'medium'
disabled	تعطيل	boolean	false
sx	خصائص تخطيط سريعة عبر sx	—	—

Events

حدث	الوصف	معامل الاستدعاء
input	حدث v-model	(val)
change	يُطلق عند تغيّر القيمة	(val)

إمكانية الوصول

مقبض الشريط role="slider" + aria-valuemin/max/now؛ وعند وضعه داخل LhFormItem وفشل التحقق يُضاف aria-invalid.