CODEWITHSUNDEEP
htmlcss
user2780681
user2780681

Reputation: 3

change css rule by input range

Can I change elem's css rule by input range without js? Like this:

  <input type="range" min="0" max="100">
  <span>Some text</span>


 input[value="0"]+span {background:red;}
 input[value="50"]+span {background:green;}

Upvotes: 0

Views: 128

Answers (1)

SeanCannon
SeanCannon

Reputation: 77966

No, the CSS parser would look for an attribute called value with a value of 0. It's a stupid language and isn't meant to interpret the way you're hoping. You could add JS to give the input an actual value attribute with the appropriate value on range change, and then the CSS would pick up on it.

Example jQuery snippet: 

$('[type="range"]').on('change', function() {
    $(this).attr('value', this.value);
}).change();

Demo: http://jsfiddle.net/seancannon/FqZZz/

Upvotes: 1

Related Questions