input type range - output on thumb error
Question
Suddenly my code stopped working, the problem is that i want to output the range value to the thumb of the range.
Here's my code:
<input id="slider1" type="range" min="5000" max="350000" step="1000" value="5000" name="beloeb" oninput="outputUpdate(value)" />
Js:
function outputUpdate(vol) {
function formatNumber (num) {
return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1.")
}
document.styleSheets[0].addRule('#slider1::-webkit-slider-thumb::before','content: "'+formatNumber(vol)+' DKK";');
}
This is the error when using chrome in console:
Uncaught SyntaxError: Failed to execute 'addRule' on 'CSSStyleSheet': Failed to parse the rule '#slider1::-webkit-slider-thumb::before { content: "8.000 DKK"; }'.
2 answers
solution1
0 ACCPTED 2016-04-12 17:56:59
::-webkit-slider-thumb is not a standard pseudo selector
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.
If you check your code in CSS Validator you will have something like:
::-webkit-slider-thumb is an unknown vendor extended pseudo-element
So probably a newer version of the browser stops supporting the property.
There is not a standard way to achieve that with CSS right now. But there are some nice tools that implement the same result using divs/spans like http://refreshless.com/nouislider/
solution2
0 2016-04-12 19:34:41
As noted in Avraam's response , the ::webkit-slider-thumb style is non-standard and will not work in any kind of cross-browser sense. As a result the styleSheet.addRule() function will be unable to parse it.
You could consider using Javascript to create a <style> block that contained the style you are targeting if one doesn't already exist in the current page as opposed to adding it directly to the stylesheet :
<script>
function outputUpdate(vol) {
// Create a style block
var style = document.createElement('style');
// Set an ID for style and type
style.id = 'slider-rule';
style.type = 'text/css';
// If the style doesn't exist in the DOM...
if(!document.getElementById(style.id)){
// Resolve the head section of the document
var head = document.head || document.getElementsByTagName('head')[0];
// Style content
var content = '#slider1::-webkit-slider-thumb::before{ content: "'+formatNumber(vol)+' DKK";}';
if (style.styleSheet){
style.styleSheet.cssText = content;
} else {
style.appendChild(document.createTextNode(content));
}
// Append this tag to the <head> section
head.appendChild(style);
}
}
function formatNumber (num) {
return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1.")
}
</script>
This obviously doesn't resolve the cross-browser concerns, but it will add the proper <style> block to the DOM if it doesn't exist :
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.