[英]How can I separate values of range slider and how can I use them for showing min and max value as output on screen?
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.在这里,我的问题是,我得到了 slider 范围的值,但现在的问题是,我得到的值是联合的,这意味着当我打印它时,它就像
2080
,其中20
和80
是单独的值,而我正在展示它们在屏幕上它们聚在一起,我想将最小值和最大值分开,并希望在屏幕上显示。 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我正在添加图像,以便您可以更好地理解我想要传达的内容 [1]: https://i.stack.imgur.com/vbhow.png
and I want that 20 and 80 seprate我想要 20 和 80 分开
You ival
is an array so you could get each item from the array like this and they will be shown as you want it.您
ival
是一个数组,因此您可以像这样从数组中获取每个项目,它们将按照您的需要显示。
<Text>{ival[0] {ival[1]}} </Text>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.