Price Component using vanilla CSS & JS

Community feedback

• 

  Ramon•130

  @ramonrpPosted almost 4 years ago

  Here you have a solution to have a input range with color only using css. Key here is to set overflow:hidden in your input and use a shadow-box in the thumb. In this I also change totally how silder looks, you have to adjust properties.

  input[type="range"] {
      -webkit-appearance:none;
      appearance:none;
      margin:5px;
      width:calc(100% - 10px);
      width:-webkit-calc(100% - 10px);
      height:25px;
      outline:none;
      background:bisque;
      border-radius:12px;   
      overflow: hidden;
  }
  input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance:none;
      appearance:none;
      width:25px;
      height:25px;
      background:sienna;
      box-shadow: -100vw 0 0 calc(100vw - 12px) peru;
      cursor:pointer;
      border-radius: 50%; 
  
  
  

  2

  ---

  

  Thomas Allen•30

  @teasmadePosted almost 4 years ago

  @ramonrp thanks for the help :)

  0
• 

  Timothy•285

  @Timothy1982Posted almost 4 years ago

  Ramon already gave you a good solution for it. Another way you "could" do it, would be with a linear-gradient as a background. That is how i did it but I guess eatherway works.

  0

  ---

  

  Ramon•130

  @ramonrpPosted almost 4 years ago

  @Timothy1982

  With linear gradient and no JS is possible? If yes, pls let me know how because I was yesterday doing some research and I couldn't find it.

  0

  

  Timothy•285

  @Timothy1982Posted almost 4 years ago

  @ramonrp

  Sorry, i must of over read the "pure" css. I did it with JS, since i used it for updating the prices and all anyways.

  But you could select the range by the value. Lets say your range is 1 to 5, then you could select it with:

          input[value="3"] {
              background-image:linear-gradient(
                                                                     to right,
                                                                     #10d5c2 0%,
                                                                     #10d5c2 49%,
                                                                     #cdd7ee 50%,
                                                                     #cdd7ee 100%
                                                                      )
               }
  

  1