Search code examples
javascriptrangeslider

I Trying to Duplicate a Javascript Range Slider with a Label and Calculation

I am a newish web designer trying to incorporate a feature for a client. I didn't charge much for this project so it is fine if I cant pull it off but it has become a thing where I just want to do it for him.

https://www.homelister.com/ has a javascript slider that has a large My Home Value label with a formula that displays 3% to 6% of that value below.

I want to basically recreate this tool on his site because he is offering similar services.

I dont want someone to do this for me but can anyone point me in a direction where I can learn this stuff? This discovery process has made me want to really dive deep into this stuff but I obviously cant do that before this Friday.

What I have done:

I have spent about 6 hours googling, reading about javascript, going through libraries, and trying to find something similar as a starting point. I am sorry I haven't done more. I just kind of feel like I am uneducated guessing.

This is a screen shot of the thing

Solution

  • For the slider itself, I suppose you could use something like:

    • Bootstrap > Range (or similar): if you are fine with using a library for this;
    • Material UI > Slider (or similar): if you are already using a more powerful library for creating the UI (e.g. React, Vue, Angular, <your-favorite-UI-library>...);
    • <input type="range" step="100">: if you want to build the whole thing from scratch without libraries.

    NOTE1: These libraries I'm mentioning are just examples. There are plenty of options out there. If any of them turns out to require too much effort for your specific use case, just look for alternatives or stand-alone range slider implementations.

    NOTE2: Those libraries (e.g. Bootstrap or Material UI) could also help you with creating the tool tip displaying the slider's current value. They will also handle some edge cases and compatibility quirks across browsers. There might also be accessibility considerations to take into account when implementing this yourself, as the libraries might also help with that. With that said, I always find it extremely valuable to try to implement something myself before resorting to a library (if the conditions permit).

    Once you have your slider set, you would also be interested in how to listen to events emitted by it, in this case I suppose you'd be interested in the change (or onChange) event so you can update the "Commission Savings" message when the value of the slider changes. How exactly this works depends on how you end up implementing your slider.

    I hope this was the kind of direction you were looking for. Have fun in your discovery process!