Looking to hire developers?
@daklo91
@VermaSankalp
Submitted
I was able to implement, but the only thing missing is the proper design for the slider. I used a react slider open source library I found on Github for it, but that library did not provide a lot of freedom to change the style of the slider. Any ides of how to implement the design for the slider?
@daklo91
Posted
Hi, there is of course a million ways to implement the slider, my way was this: https://github.dev/daklo91/reactolator/blob/d5c431923ec280fd7a5f66573cd89988b4a36c61/src/components/Layout/Header.js#L14
Basically what it is, is a div within a div. I personally gave my divs the class names "switch-body" and "switch-knob" and the css is in the Header.module.css.
It is controlled by a state which can have the number 1, 2 or 3. If a user clicks on the "switch-body", it will switch between these numbers. And honestly, think of it as a button instead of a switch/slider because a button is better for mobile users with small screens (in this scenario at least).
Anyway the magic happens here: const toggleSwitchNotch = switchTheme === 1 ? { marginLeft: "0px" } : switchTheme === 2 ? { marginLeft: "22.5px" } : { marginLeft: "45px" };
If the state which I called "switchTheme" is on 1, the margin on the "switch-knob" div will be 0px. If the state is on 2, the margin on the "switch-knob" div will be 22.5px. If the state is on 3, the margin on the "switch-knob" div will be 45px.
And of course, you can use these numbers to control the theme as well which you can see in my code.
Hope this helps :)
Marked as helpful
