Here, my problem is, I got the value of range slider but now the problem is, the value which I getting is joint which means while I am printing it, it is like 2080 where 20 and 80 are separate values and while I am showing them on screen they are coming together and I want to separate the min and max value, and want to show on screen.
here is the code for the same.
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
and I am adding the image so you can understand better what I want to convey [1]: https://i.stack.imgur.com/vbhow.png
and I want that 20 and 80 seprate