Estoy usando el componente Mui Slider debajo de una interfaz de usuario donde tengo que restringir su valor para cierto rango. Por ejemplo, la bola del control deslizante no se podrá arrastrar después de 50. El usuario puede seleccionar valores hasta 50, pero mostrará el rango completo. No encontré ninguna solución directa, así que descubrí una derivación con valores de control deslizante discretos. aquí está el enlace de sandbox de código, donde hice una matriz de valores disponibles completos. ¿Hay alguna solución ordenada y limpia?
<Slider size="small" defaultValue={30} aria-label="Small" valueLabelDisplay="auto" />Creo que debe determinar el valor máximo para su control deslizante como se muestra a continuación
<Slider ... max={50} min={0} />Y veo su código y creo que puede determinar la matriz de marcas solo para etiquetas, no para todos los valores
Hola Fazlay Rabbi, es tan simple que solo necesita pensar fuera de la caja, solo necesita escribir simplemente si la condición escribo su solución en golpe:
import React, { useState } from "react"; import Box from '@mui/material/Box'; import Slider from '@mui/material/Slider'; export default function DiscreteSliderLabel() { const [sliderValue, setSliderValue] = useState(0); const handleChange2 = (event, newValue) => { if (newValue > 50){ setSliderValue(50); }else{ setSliderValue(newValue); } }; return ( <Box sx={{ width: 300 }}> <Slider value={sliderValue} aria-label="Always visible" onChange={handleChange2} valueLabelDisplay="on" /> </Box> ); }