javascript - jQuery - Set style of object with '::' in name

Question

I am customising the look of an input-range and the slider object which I have done successfully with this CSS:

input[type="range"] {
    -webkit-appearance: none !important;
    background: rgba(1,1,1,0.3);
    height:6px;
    border: solid 1px #000;
    border-bottom: solid 1px #1d1d1d;
    border-radius: 6px;
    width: 48px;
    margin: 0;
    margin-bottom: 4px;
    display: block;

}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    background: -webkit-linear-gradient(top, #a2a2a2 0%,#8b8b8b 50%,#7b7b7b 100%);
    height:10px;
    width:10px;
    box-shadow: inset 0 1px 0 #C4C4C4;
    border-radius: 10px;
}

This code works 100%, however what I want to do I be able to change the background color of the slider (input[type="range"]::-webkit-slider-thumb) with jQuery.

I've been able to change the border of the main box with:

$('input#volume').css('background', '#FFFFFF');

But I can't figure out how to get the slider with jQuery. Thanks

(FYI I am only targeting Safari (WebKit) on a Mac hence the lack of other browser support, its for an application)