how to call range::-webkit-slider-runnable-track?

Question

Basically I need to call .range::-webkit-slider-runnable-track using either jquery or javascript so I can make some changes over to it's background and do other implementations over it.

To be precise I am currently using

$('<style>.myrange::-webkit-slider-runnable-track{background:linear-gradient(to right, white'+val+'%, #bbb '+val+'%);}</style>').appendTo('head');

This works pretty much fine, but the problem is that I'm calling .myrange::-webkit-slider-runnable-track like couple of thousands of times which every time it appends to head my range gets to face some performance issue and so.

I would really appreciate if some one tell how to do this with something like $('.myrange::-webkit-slider-runnable-track').css("background", "black");

Question Update:

<input type="range" value="0" min="0" max="100" id="myrange" class="myrange"/>

This range has connected to a video which track the video duration and changes the color of the track up to the point that the video has been watched.

And to do the coloring of the range tracker this is what I am doing:

vid.addEventListener('progress', function() {
    var range = 0;
    var bf = this.buffered;
    var time = this.currentTime;

    while(!(bf.start(range) <= time && time <= bf.end(range))) {
        range += 1;
    }
    var loadStartPercentage = bf.start(range) / this.duration;
    var loadEndPercentage = bf.end(range) / this.duration;
   var loadPercentage = loadEndPercentage -      loadStartPercentage;

   val = loadPercentage*100;
   thmpos = $('.vidskb_r').val();
   var style = $("<style>", {type:"text/css"}).appendTo("head");
   style.text('.vidskb_r::-webkit-slider-runnable-track{background:linear-gradient(to right, #ff7e20 '+thmpos+'%, #fff '+thmpos+'%, #fff '+val+'%, #bbb '+val+'%);}');

});

Thanks in advance:)

guest271314 · Accepted Answer · 2016-12-12T11:01:02.690

2

Append css text to a single <style> element, substitute .text() for .append()

Note, you do not need to create a new <style> element at each iteration of a loop or event handler. Create <style> element once outside of loop or event handler and use a variable to reference the single <style> element within loop or event handler.

// create and append `<style>` element to `<head>` once, here
// before attaching `progress` event to `vid`, and outside
// of `progress` event handler
var style = $("<style>", {type:"text/css"}).appendTo("head");

vid.addEventListener('progress', function() {
    var range = 0;
    var bf = this.buffered;
    var time = this.currentTime;

    while(!(bf.start(range) <= time && time <= bf.end(range))) {
        range += 1;
    }
    var loadStartPercentage = bf.start(range) / this.duration;
    var loadEndPercentage = bf.end(range) / this.duration;
   var loadPercentage = loadEndPercentage -      loadStartPercentage;

   val = loadPercentage*100;
   thmpos = $('.vidskb_r').val();

   style.text('.vidskb_r::-webkit-slider-runnable-track{background:linear-gradient(to right, #ff7e20 '+thmpos+'%, #fff '+thmpos+'%, #fff '+val+'%, #bbb '+val+'%);}');

});

edited Dec 12 '16 at 11:01

answered Dec 12 '16 at 10:05

guest271314

1
15
104
177

So it will be like this: `var style = $(" – akdsfjakls Dec 12 '16 at 10:11
You can substitute `.text()` for `.append()` – guest271314 Dec 12 '16 at 10:14
I updated my question you can read the update in my question! – akdsfjakls Dec 12 '16 at 10:22
@akdsfjakls Have you substituted `.text()` for `.append()`? See updated post. – guest271314 Dec 12 '16 at 10:23
@akdsfjakls No changes in which way? – guest271314 Dec 12 '16 at 10:29
It's still appending to head over and over, each time the `val` value changes. which cause me to face performance issue. – akdsfjakls Dec 12 '16 at 10:31
Can you see this: https://postimg.org/image/he6cgh0sv/ it's my head scout – akdsfjakls Dec 12 '16 at 10:33
You only need to call `var style = $(" – guest271314 Dec 12 '16 at 10:35
I posted my whole video handler you can see it in my question update, And you said I only need to call .... once, do you mean I should create a new function input my `style.text` and call it in my `progress` handler? – akdsfjakls Dec 12 '16 at 10:43
1

Thanks Man, you are awesome, It's working just perfect. – akdsfjakls Dec 12 '16 at 11:04

how to call range::-webkit-slider-runnable-track?

1 Answers1

Linked