0
137
Vistascrear un rango personalizado en reaccionar js
Estoy tratando de hacer un selector de rango como este, ¿alguien puede ayudarme?
import React, { Component } from "react"; const [selectedValue, setSelectedValue] = useState(0); const handleChange = (e) => { setSelectedValue(e.target.value); }; render() { return ( <div> <input onInput={handleChange} type="range" min="0" value={selectedValue} max="5" step="1" list="tick-list" /> </div> ); } }he manejado la parte de trabajo de este diseño solo quiero que el css sea así
1 Respuestas
Responde la pregunta0
Consulte la versión de trabajo a continuación.
Lo primero que debe tener en cuenta es que debe usar el estado de reacción para administrar el valor del control deslizante, independientemente de la frecuencia con la que desee interactuar con él.
Una buena manera de obtener los pasos de diez es dividir el valor actual por 10, redondearlo al entero más cercano y multiplicarlo por 10 nuevamente. Tenga en cuenta que no debe mutar la variable sliderValue real, sino que debe usar una nueva variable. Este método se utilizó en el ejemplo 1.
const shownValue = Math.round(sliderValue / 10) * 10Si desea que el control deslizante solo salte en pasos grandes (ejemplo 2), debe establecer el atributo máximo en la entrada del control deslizante en 6 y multiplicar el resultado por 10.
const {useState} = React; const Example1 = () => { const [sliderValue, setSliderValue] = useState(0); const shownValue = Math.round(sliderValue / 10) * 10 return ( <div> <h3> Example 1 - smooth </h3> <div> <input type="range" name="range" id="range" min="0" max="60" value={sliderValue} onChange={e => { setSliderValue(e.target.value); }} /> </div> <div> {shownValue} </div> </div> ); }; const Example2 = () => { const [sliderValue, setSliderValue] = useState(0); return ( <div> <h3> Example 2 - incremental </h3> <div> <input type="range" name="range" id="range" min="0" max="6" value={sliderValue} onChange={e => { setSliderValue(e.target.value); }} /> </div> <div> {sliderValue * 10} </div> </div> ); }; // Render it ReactDOM.render( <div> <Example1 /> <Example2 /> </div>, document.getElementById("react") ); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> <div id="react"></div>