• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
    • Questions
    • Teachers
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

77
Views
Restricción muiSlider para cierto rango

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" />
over 2 years ago · Juan Pablo Isaza
2 answers
Answer question

0

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

over 2 years ago · Juan Pablo Isaza Report

0

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> ); }
over 2 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error