0
132
Viewscreate a custum range in react js
i am trying to make a range selector like this can anyone help
import React, { Component } from "react";
const [selectedValue, setSelectedValue] = useState(0);
const handleChange = (e) => {
setSelectedValue(e.target.value);
};
render() {
return (
<div>
<input
onInput={handleChange}
type="range"
min="0"
value={selectedValue}
max="5"
step="1"
list="tick-list"
/>
</div>
);
}
}
ihave mananged the working part of this deign i just want the cssto like that
1 answers
Answer question0
Please see working version below.
First thing to note is that you should use react state to manage the value of the the slider - regardless of how often you want to interact with it.
A nice way to get the steps of ten is divide the current value by 10, round it up to the nearest integer, and multiply it by 10 again. Note that you should not mutate the actual sliderValue variable but should rather use a new variable. This method was used in example 1.
const shownValue = Math.round(sliderValue / 10) * 10
If you would like to only have the slider jump in large steps (example 2) then you should just set the max attribute on the slider input to 6 and multiply the result by 10.
const {useState} = React;
const Example1 = () => {
const [sliderValue, setSliderValue] = useState(0);
const shownValue = Math.round(sliderValue / 10) * 10
return (
<div>
<h3>
Example 1 - smooth
</h3>
<div>
<input
type="range"
name="range"
id="range"
min="0"
max="60"
value={sliderValue}
onChange={e => {
setSliderValue(e.target.value);
}}
/>
</div>
<div>
{shownValue}
</div>
</div>
);
};
const Example2 = () => {
const [sliderValue, setSliderValue] = useState(0);
return (
<div>
<h3>
Example 2 - incremental
</h3>
<div>
<input
type="range"
name="range"
id="range"
min="0"
max="6"
value={sliderValue}
onChange={e => {
setSliderValue(e.target.value);
}}
/>
</div>
<div>
{sliderValue * 10}
</div>
</div>
);
};
// Render it
ReactDOM.render(
<div>
<Example1 />
<Example2 />
</div>,
document.getElementById("react")
);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>