Aquí, mi problema es que obtuve el valor del control deslizante de rango, pero ahora el problema es que el valor que obtengo es conjunto, lo que significa que mientras lo imprimo, es como 2080 , donde 20 y 80 son valores separados y mientras muestro ellos en la pantalla se están uniendo y quiero separar el valor mínimo y máximo, y quiero mostrar en la pantalla. aquí está el código para el mismo.

 import styled from "styled-components" import { Slider } from "@mui/material" import { useState } from "react" const Container = styled.div` margin-top: 5px; display: flex; background-color: #F0F0F0; ` const Left = styled.div` margin-top: 5px; display: flex; flex: 1; flex-direction: column; background-color: white; margin-right: 9px; ` const Texthead = styled.h3` margin-left: 30px; font-weight: 600; margin-top: 10px; ` const Text = styled.h6` margin-left: 30px; font-weight: 400; ` const Line = styled.hr` margin-top: 10px; ` const SliderContainer = styled.div` width: 330px; display: flex; align-items: center; justify-content: center; ` const ProductList = () => { const [val,setVal]= useState([20,80]) const updateVal = (e,item)=>{ setVal(item) } function valuetext(value) { return `${value}°C`; } const ival = val; const fval = setVal; return ( <Container> <Left> <Texthead>Filters</Texthead> <Line /> <Text>Price</Text> <SliderContainer> <Slider style={{width:"200px"}} value={val} max={100} onChange={updateVal} getAriaValueText={valuetext} valueLabelDisplay="auto" /> </SliderContainer> <Line /> <Text>{ival} </Text> <Text>Discout % </Text> </Left> </Container> } export default ProductList

y agrego la imagen para que entiendas mejor lo que quiero transmitir [1]: https://i.stack.imgur.com/vbhow.png

y quiero que separe el 20 y el 80