Position Range Slider
Position Range Slider é um componente de formulário para React e Tailwind CSS, da biblioteca UI Layouts, com licença MIT. Copia e cola no teu projeto.
UI Layouts
MIT
forms
O que é
Position Range Slider é um componente de formulário para React e Tailwind CSS, da biblioteca UI Layouts, com licença MIT. Copia e cola no teu projeto.
Como usar
Abre o componente no catálogo, carrega em copiar, e cola no teu projeto. O prompt copiado leva o código e as regras para o teu agente o reproduzir sem alterar nada.
Cinco cópias grátis por mês. Sem cartão.
Não precisa de pacotes além do que o projeto já tem
Licença
Este componente vem de UI Layouts e é redistribuído sob a licença MIT, que permite uso comercial. O aviso de copyright viaja com o código.
Position Range Slider
'use client';
import { DualRangeSlider } from '@/components/ui/slider';
import React, { useState } from 'react';
export default function PositionRangeSlider() {
const [celPer, setCelPer] = useState(70);
const [values, setValues] = useState([0, 100]);
return (
<>
<div className=' w-3/5 mx-auto space-y-20 py-20'>
<DualRangeSlider
label={() => <>$</>}
lableContenPos={'left'}
value={values}
onValueChange={setValues}
min={0}
max={100}
step={1}
/>
<DualRangeSlider
label={() => <>℃</>}
value={[celPer]}
labelPosition='bottom'
onValueChange={([celPer]) => celPer != null && setCelPer(celPer)}
min={0}
max={100}
step={1}
/>
</div>
</>
);
}