I use the react-range package for personal purposes of my project, the problem is that I cannot save the value when the page is refreshed, I tried to use the local storage but I could not
As you understand, I need to save the value using local storage, in addition, I will leave a link to mine on codesandbox link
SideBarBlurChange.jsx
import React, {useEffect, useState} from "react"; import {getTrackBackground, Range} from "react-range"; const STEP = 0.1; const MIN = 0; const MAX = 100; export default function SideBarBlurChange(props) { const [values, SetValues] = useState([20]) const SaveChanges = () => { alert(values) } return ( <> <div style={{ display: "flex", justifyContent: "center", flexWrap: "wrap", }} > <Range values={values} step={STEP} min={MIN} max={MAX} onChange={(values) => SetValues(values)} renderTrack={({ props, children }) => ( <div onMouseDown={props.onMouseDown} onTouchStart={props.onTouchStart} style={{ ...props.style, height: "36px", display: "flex", width: "100%" }} > <div ref={props.ref} style={{ height: "5px", width: "100%", borderRadius: "4px", background: getTrackBackground({ values: values, colors: ["#548BF4", "#ccc"], min: MIN, max: MAX }), alignSelf: "center" }} > {children} </div> </div> )} renderThumb={({ props, isDragged }) => ( <div {...props} style={{ ...props.style, height: "42px", width: "42px", borderRadius: "4px", backgroundColor: "#FFF", display: "flex", justifyContent: "center", alignItems: "center", boxShadow: "0px 2px 6px #AAA" }} > <div style={{ height: "16px", width: "5px", backgroundColor: isDragged ? "#548BF4" : "#CCC" }} /> </div> )} /> <output style={{ marginTop: "30px" }} id="output"> {values[0].toFixed(1)} </output> <button onClick={() => SaveChanges()}>Save</button> </div> </> ); }
Advertisement
Answer
I think your main problem was that localStorage doesn’t store anything besides strings. You’re going to want to parseInt then check to make sure localStorage isn’t null. Can you try this and see if it works?
const ls = parseInt(window.localStorage.getItem('values')); const [values, SetValues] = useState(ls ? [ls] : [20]); const SaveChanges = () => { alert(values); localStorage.setItem('values', values); }