0

I need to style my input range, according to this image:
enter image description here

I managed to do that with the help of range.scss mixin but the problem I have is, how I can style the background when the step isn't reached.
Everything from 0 to step 75 should be green, the rest grey.

I only found some options for the complete background and not just for the already dragged steps. Any ideas?

Marek123
  • 1,193
  • 7
  • 35
  • 75
  • and where exactly is your code? – Dekel Nov 09 '16 at 15:31
  • sorry, adding it right now! – Marek123 Nov 09 '16 at 15:31
  • Maybe this would help you - http://stackoverflow.com/questions/34850327/styling-input-range-for-webkit-with-pure-css/34850882#34850882 (that is webkit only and so I'm not closing as a dupe). – Harry Nov 09 '16 at 15:33
  • There are a number of articles about this on the internet. Here's one a simple search on your title found, on this site even: [How to customize the HTML5 input range type looks using CSS?](http://stackoverflow.com/a/21211386/215552) – Heretic Monkey Nov 09 '16 at 15:42

1 Answers1

0

Apparently the line that range is on is called track, Css tricks has a detailed article on how to customize the range input.

Here is the link : https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/

hope this helps.

Saa_keetin
  • 647
  • 6
  • 10