change css rule by input range

Question

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;}

Well the first thing I'd try is spelling value correctly. Beyond that this is what I'd try. — rfoo
– rfoo, Commented Sep 15, 2013 at 6:29

SeanCannon · Accepted Answer · 2013-09-15 06:31:58Z

1

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/

answered Sep 15, 2013 at 6:31

SeanCannon

78.1k17 gold badges126 silver badges145 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

change css rule by input range

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related