Sliding component using JS Sass and html

Community feedback

• 

  P

  Grog the Frog•480

  @GregLyons

  Posted about 3 years ago

  Ahh I gave up on this challenge because I got so frustrated trying to style the slider. I couldn't figure out how to get the left part filled in, while having the right-hand part be not filled in (with only HTML/CSS).

  Seeing this I remember that I actually had built a slider in a React project I worked on (so not pure HTML/CSS). I was following this tutorial for a double slider, and adapted it to make a single slider. Adapting that post to a single slider and in HTML/CSS/JS context, essentially, you have an HTML set-up like this:

  <div class="slider__wrapper">
    <input type="range" class="slider__thumb">
    <div class="slider">
      <div class="slider__track" />
      <div class="slider__range" id="range" />
    </div>
  </div>
  

  Then you would use CSS to

  1. Remove the background from the <input>, so that only the thumb is visible (hence the class name slider__thumb);
  2. Use slider__track as your basic background (the gray, empty one), and slider__range as your filled-in background (the green one);
  3. Use position: relative; on slider__wrapper so that you can position: absolute; slider__thumb and slider to center them properly.

  Finally, you would use JS to manipulate the width of slider__range based on the value of the input. So if the input value is 1 and the max is 5, then slider__range should have width: 20%;. This makes it so that changing the value of the input changes the width of the background slider__range, which should achieve the desired effect. (Also, you may need to set some z-indexs to get it to look right.)

  It's pretty complicated, all to just to get the background of the slider to be two colors instead of one... I hope that all makes sense. I'd love to see a simpler/pure CSS solution though, as this challenge is marked as HTML/CSS only.

  01

  Marked as helpful