Interactive pricing component

Community feedback

• 

  Gaurav Kumar•570

  @GauravkumarioPosted about 3 years ago

  can you tell me how you designed range input ?

  Marked as helpful

  0

  ---

  

  Arsh Goyal•940

  @arshGoyalDevPosted about 3 years ago

  @Gauravkumario

  1. I have set the appearance to none of the input tag (for chrome) and the background to transparent.
  2. Used the pseudo elements ::-webkit-slider-thumb and ::-moz-range-thumb for chrome and firefox respectively to style the thumb.
  3. Created a div (for complete track) and span (for the slided part ) and styled the track of the input.
  4. And increased the width of the span as the value of input increases with javascript.

  If you have more doubts you can check the source code on my github profile. Thanks for your feedback.

  0