Slider

Sliders são componentes utilizados para seleção de valores dentro de um intervalo.

---

Quando usar:

• Recomendamos o uso de sliders quando for preciso a seleção de valores dentro de um intervalo, sobretudo quando for preciso selecionar mais de um valor.
• Recomendamos o uso de sliders quando a velocidade na seleção de valores em um intervalo for mais relevante que a precisão.

Quando não usar:

• Não recomendamos o uso de sliders quando não houver necessidade de uma precisão muito grande na seleção dos valores.
• Não recomendamos o uso de sliders em conjunto com inputs para que o usuário consiga editar o dado tanto pelo slider quanto pelos inputs.

Observações:

• O slider do Cuida é um wrapper do Vue slider component com a sua adequação aos nossos princípios e recomendações. Para informações detalhadas do componente, recomendamos leitura da documentação.

---

Uso

<CdsSlider
	:min="0"
	:max="100"
	:value="value"
/>

---

Preview

0

100

Mostrar log

⚡Nenhum evento foi disparado

---

Props

Nome	Tipo	Default	Opções	Descrição
* min (required)	number	0	--	O valor mínimo do slider.
* max (required)	number	100	--	O valor máximo do slider.
* modelValue (required)	array	[0, 100]	--	Prop utilizada como v-model. Retorna as posições selecionadas no slider.
variant	string	'green'	green teal blue indigo violet pink red orange amber dark	A variante de cor. São 10 variantes implementadas: 'green', 'teal', 'blue', 'indigo', 'violet', 'pink', 'red', 'orange','amber' e 'white'.

Eventos

Nome	Descrição
@update:modelValue	Evento utilizado para implementar o v-model.

Slots

Nome	Descrição
#tooltip	Scoped slot para renderização customizada dos tooltips. A propriedade 'tooltip', que pode ser acessada através do slot, contém pos (posição do componente em %), index (o índice do slider), value (o valor do slider), focus (se o slider está no estado de focus ou não), disabled (se o slider está disabilitado ou não).