Range Slider

Cú pháp

<zmp-range>

Range Slider là component giúp tạo một hanh trượt để hiển thị giá trị hiện tại và các khoảng trong phạm vi.

Range Slider Properties

Prop	Type	Default	Description
init	boolean	true	Khởi tạo Range Slider hay không
value	number |array | string		Giá trị của Range Slider, trường hợp là dual range slider giá trị là array
min	number | string		Giá trị nhỏ nhất
max	number | string		Giá trị lớn nhất
step	number | string	1	Bước nhảy khi range thay đổi
label	boolean	false	Bật label hiển thị khi kéo nút điều chỉnh (knob)
dual	boolean	false	Bật dual range slider
vertical	boolean	false	Bật range slider dạng dọc
vertical-reversed	boolean	false	Đổi chiều range slider dạng dọc. (Sử dụng khi đã set vertical:true)
draggable-bar	boolean	true	Cho phép người dùng click/ press lên range slider để thay đổi giá trị
format-label	function(value)		Method trả về label đã được dịnh dạng. Đối số nhận vào giá trị label
scale	boolean	false	Bật thước tỉ lệ trên range slider
scale-steps	number	5	Số lượng khoảng đo trên thước tỉ lê
scale-sub-steps	number	0	Số lượng vạch đo phụ trên mỗi khoảng đo
format-scale-label	function (value)		Method trả về label hiển thị giá trị của khoảng đo đã được format. Đối số nhận vào giá trị của khoảng đo.
limit-knob-position	boolean		Giới hạn vị trí nút điều chỉnh theo kích thước của range bar. Măc định được bật trên iOS theme
disabled	boolean	false	Vô hiệu hóa range slider
id	string		Range slider element ID
input	boolean	false	Nếu bật, sẽ render input type="range" element phía trong
input-id	string		Giá trị thuộc tính ID của input element
name	string		Giá trị thuộc tính "name" của input element

Range Slider Events

Event	Description
@range:change	Event sẽ được triggered trong quá trình range thay đổi
@range:changed	Event sẽ được triggered khi người dùng thả nút điều chỉnh

Ví dụ

Code demo fallback when rendering server side!