Responsive interactive pricing component

Community feedback

• 

  Boots 😺•1,590

  @adityaphasuPosted over 1 year ago

  Hi!

  To answer your question, you can use the SVG as a background for the slider thumb using css! Here's how we would do it (since you are using scss so accordingly):

  input {
      -webkit-appearance: none;
      width: 95%;
      height: 0.5rem;
      background-color: $light-grayish-blue;
      border-radius: 1rem;
  
      &::-webkit-slider-thumb,  &::-moz-range-thumb {
        -webkit-appearance: none;
        border-radius: 50%;
        height: 2.5rem;
        width: 2.5rem;
        background: $strong-cyan url("/images/icon-slider.svg") no-repeat center;
        box-shadow: 0 0.5rem 2rem $strong-cyan;
        cursor: pointer;
      }
  }
  

  • Let me explain the code snippet, so firstly we are using -webkit-appearance: none to strip off the default styles from the input which the browser applies. Since now it doesn't have any styles we add a width and height and the background color to the input slider bar.
  • Now that the slider bar is set up, we do the same thing for its thumb, we use &::-webkit-slider-thumb, &::-moz-range-thumb (& will turn into input since its scss) which are prefixes for the browsers to target the slider thumb and then use -webkit-appearance: none to remove the default thumb styles, now that the thumb has no styles we have to style it according to ourselves I have added a border-radius: 50% so it becomes round and a height and width so it's visible.
  • Now for the icon part we use the background property. to set firstly the color then the icon URL then values for styling the icon:

    background: $strong-cyan url("/images/icon-slider.svg") no-repeat center;
                 //color   //url  //icon doesn't repeat   // it's in the center 
  

  Remember to change the $light-grayish-blue and $strong-cyan with the colors from the style guide and that's it!

  You can change the values accordingly I've just used these values for width and height as an example.

  Apart from the slider everything looks good and the scss file looks clean!

  Good luck and Happy coding!🕺🏻

  Marked as helpful

  0