0

In this example, the value of a <range> tag is written to an <output> tag:

http://jsfiddle.net/2GhQX/

Can the value of the <range> tag be written to the CSS :before value of the same <range> tag?

input[type="range"]:before {
    content: <insert value here>
}

Resorting to JavaScript is acceptable if necessary.

forthrin
  • 2,709
  • 3
  • 28
  • 50
  • 1
    `input` tags are self-closing tags and they **cannot have pseudo-elements** attached to them (but I think there were browser inconsistencies in the past). – Harry Mar 10 '16 at 16:11
  • This works in Safari: input[type="range"]:before {content: attr(min);} – forthrin Mar 10 '16 at 16:19
  • But it is not supposed to work (and so it may be scrapped anytime without you realizing it). [Reference SO thread](http://stackoverflow.com/questions/3538506/which-elements-support-the-before-and-after-pseudo-elements). – Harry Mar 10 '16 at 16:20
  • 1
    Thanks for sharing this. Then the whole question is meaningless, really, and I should resort to using the JS Fille example. – forthrin Mar 10 '16 at 16:23

2 Answers2

1

You'll need to use JavaScript to write the value to a custom attribute of the input tag and then use the the CSS attr() function to grab the value of that attribute and populate the pseudo element's content.

document.getElementById("range").addEventListener("input",function(){
  this.dataset.value=parseInt(this.value.trim());
},0);
*{color:#000;font-family:arial,sans serif;}
input::before{
  content:attr(data-value);
}
<input data-value="0" id="range" type="range" value="0">

Another option, with better future proofing, would be to use the output element with a similar bit of JavaScript, like so:

document.getElementById("input").addEventListener("input",function(){
  document.getElementById("output").value=this.value.trim();
},0);
*{color:#000;font-family:arial,sans serif;}
output{float:left;}
<input data-value="0" id="input" type="range" value="0">
<output for="input" id="output">0</output>
Shaggy
  • 6,696
  • 2
  • 25
  • 45
  • Didn't know you could do this. You learn something new every day. Best solution so far. (Even though using the pseudo-element will be obsolete in the future.) – forthrin Mar 10 '16 at 18:23
  • @forthrin, I've added another option for you that doesn't rely on continued browser support for the pseudo element on the `input` tag. – Shaggy Mar 25 '16 at 11:41
0

try this.to dynamically apply styles,you can append new style tag with modified value as css content property value for a desired selector.

$('#rangeInput').on('input', function() {
  $('body').append('<style>input[type="range"]:before{content: "' + this.value + '";}</style>');
});
input[type="range"]:before {
  content: '0'
}
<!DOCTYPE html>
<html>

<head>
  <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>

  <body>
    <form oninput="amount.value=rangeInput.value">
      <input type="range" id="rangeInput" name="rangeInput" min="0" max="100">

      <output name="amount" for="rangeInput">0</output>
    </form>


  </body>
</body>

</html>
Pavan Teja
  • 3,192
  • 1
  • 15
  • 22
  • Well, obviously writing directly to the style sheet will work :) However, it does not update until letting go of the slider. Is it possible to have it update continuously while sliding? (And if possible, without writing plain text to the style sheet.) – forthrin Mar 10 '16 at 16:21
  • try the edited snipped.. changed the `change` event to `input` – Pavan Teja Mar 10 '16 at 16:32