change style dynamically of none html element

Question

I'm using angularJs and want to change the style of an attribute dynamically. Normally I would do this with ng-style in the html element.

But I want to apply styles to the track of a range input. This element can be accessed in css like that: .slider::-webkit-slider-runnable-track(As Example for the webkit selector). Can I change the style for such an attribute in a function where I have the id for this element?

E.g (how I would do it in jquery):

$scope.change = function(id, value) {
        $('#'+id+'::-webkit-slider-runnable-track').css('background-image',value);
};

Answer 1

Javascript generally don't have access to pseudo elements, one possible workaround would be to insert a style tag

$scope.change = function(id, value) {
    var style  = document.createElement('style');
    var styles = '{ background: red }';

    style.innerHTML = '#' + id + '::-webkit-slider-runnable-track ' + styles;
    document.head.appendChild(style)
};

FIDDLE

Another way would be to keep the styles in the stylesheet, and just use a different class for a different style

#test.red::-webkit-slider-runnable-track {
    background : red;
}

and then do

document.getElementById('test').classList.add('red');

FIDDLE