คอมโพเนนต์ทั้งหมด

Slider

เลื่อนเลือกค่าตัวเลขในช่วงที่กำหนด

ui/slider.tsxClient component

พื้นฐาน

input type=range ของเบราว์เซอร์ แถบเติมสีตามค่า ใช้ลูกศร Page Up และ Page Down ได้

เวลาเรียนต่อวัน25 นาที

เราจะเตือนเมื่อครบเวลา

tsx

<Field label="เวลาเรียนต่อวัน" aside={<span>{minutes} นาที</span>}>
  <Slider min={5} max={120} step={5} value={minutes}
    onChange={e => setMinutes(Number(e.target.value))} />
</Field>

Props

Prop	Type	Default	คำอธิบาย
`min / max / step`	`number`	`0 / 100 / 1`	ช่วงค่า
`value / defaultValue`	`number`	`-`	ค่าปัจจุบัน
`onChange`	`ChangeEventHandler`	`-`	อ่านค่าด้วย Number(e.target.value)

ใช้เมื่อไร

ควรทำ

แสดงค่าปัจจุบันเป็นตัวเลขข้างป้าย
ใช้กับค่าที่ประมาณได้ เช่น เวลา ระดับเสียง

ไม่ควรทำ

ใช้เมื่อต้องการค่าแม่นยำ ใช้ Input type=number แทน