How can you control this toggle switch's behavior with JavaScript alone?

I just finished a switch I’ve been working on for the drum machine project. The switch is the 3 Position Toggle Switch With Forward And Reverse. I forked the Pure CSS 3 Position Toggle Switch by Tim Tech.

The switch does what I want it to do. It has 3 positions and automatically reverses. The issue that I have is that I cannot remove lines 35 to 51 in the CSS. If I take these lines off, the switch jumps from position 1 to position 3 on the first click. Once you on click it a second time, it works properly and it starts the reverse motion.

I would like to try to control the switch’s behavior entirely with JavaScript because I want to make a React component that’s as self-contained as I can make it and would prefer to not use inline styles.

Thanks for any help and have a great day!

The switch you’ve forked works in unexpected way, are you sure you need it? If the switch in the central position and I want to turn it left I should be able to click on the left side of the switch, right? :slight_smile:

Thanks a lot for your help!

I was looking for a switch like this because I want to have different levels of effects. I would prefer if the additional effects are turned on and off in a gradual manner. I also want to try to make it easy to use on mobile without needing to have a larger size. I think this button would probably work fine on mobile.

I was also working on this 3 Way Toggle Switch. This one is a fork of the Toggle Switch 3 position by Nicolas. This one would need to be larger because you have to press each option. I prefer the first switch.

Which do you prefer?

Thanks again.

The second one works properly to me, so I would choose it.

I did some changes to the first switch and now the user can go left or right from the middle option. The new switch is the 3 Position Toggle Switch With Forward, Reverse, And An Unlocked Track. The track is now unlocked, but the user still has to go through option 2 in order to get to the other side. In the previous toggle switch, the 3 Position Toggle Switch With Forward, Reverse, And A Locked Track, the user did not have the option to turn around. This latest fork was a combination of the two CodePen projects mentioned above. Let me know what you think.

Thanks again for any help and have a great weekend!

In real word it would be the same, so it doesn’t introduce any unexpected experience. And that’s why most of the toggle switches are binary. The term “toggle” itself presumes the “opposite” effect on each press.

Did you consider radio buttons instead (you can style them as just buttons)

1 Like

Thanks a lot for your help! I should have asked questions before going to search on my own.

The switches that I did with the tracks are both based on radio buttons, but the buttons are hidden with a left property set to -9999px.

I should of thought of searching for radio sliders, instead of 3 way toggle switches. I just did right now and came across this Stack Overflow thread with simpler solutions and almost just what I needed.

Sometimes I search for the wrong things and end up wasting a lot of time and find more complicated solutions than needed.

I should do a lot more research and ask questions before adding new features to projects. This drum machine project turned into a control knob, volume control, and special effects button project. The control knob was pretty difficult to do, and iOS made it harder because certain things did not work without many modifications. Then there was this button that I asked help for in this thread. And finally there was the volume control. I had no idea that iOS doesn’t allow for volume control, so I learned the basics of the Web Audio API in order to control the gain. After implementing the Web Audio API, it turns out that iOS 13 currently has a bug that you can read about at the WebKit Bugzilla website. The problem is that the createMediaElementSource() method of the AudioContext Interface is currently not working properly in the iOS 13 and the iPadOS 13 versions of Safari. I tested an iOS 12 device and found no issues with it.

Now I have to add another button to disable the volume control knob and the Web Audio API on iOS 13 and iPad OS 13 devices. This one will probably be a simple 2 position toggle switch.

Thanks again and I’ll be back before implementing anything to see if it’s even possible, or if there are terms I should be searching for.