CODEWITHSUNDEEP
javascriptjqueryhtmlcssangularjs
ohboy21
ohboy21

Reputation: 4319

Whats the simplest way of changing the color of a range slider?

I want to use a range for an input tag. I also want to use standard HTML. So

<input type="range">

What is the easiest way of styling the bar before and after the thumb?

I want to have two colours: One before the thumb and another colour after.

I played along with JavaScript, but all the solutions were big and uneasy to handle.

I am using AngularJS for my WebApp, so:

Upvotes: 2

Views: 1403

Answers (1)

Fizk
Fizk

Reputation: 1114

Since you're using <input type="range">, I assume that support for older browsers is not an issue. This solution relies on background-size, which is not supported in IE < 8 (http://caniuse.com/#search=background-size)

This fiddle demonstrates how it could be done in jQuery;

http://jsfiddle.net/LP5XA/

It's simply a background images in the slider, that stretches when the slider is moved.

Upvotes: 2

Related Questions