1

I have a HTML5 video player with a track bar at the bottom styled in CSS. I would like to use jQuery to change the style of the track bar.

With jQuery I can style the background of the track bar using:

$('#video-controls').css("background", "rgb(0,110,135)");

As the video track bar is in a division with an id called 'video-controls'.

However this leaves the slider button itself the original colour (green).

enter image description here

In CSS the slider is defined as follows:

input[type=range].slider::-moz-range-thumb 
{
  box-shadow: 0.8px 0.8px 1.9px rgba(0, 0, 62, 0.67), 0px 0px 0.8px rgba(0, 0, 88, 0.67);
  border: 1.9px solid rgba(0, 30, 0, 0.57);
  height: 16px;
  width: 32px;
  border-radius: 4px;
  background: #a4b93f;
  cursor: pointer;
}

I have tried

$("input[type=range].slider::-moz-range-thumb").css("background", "rgb(0,110,135)");

But it doesn't do anything. How do I change the background css property?

Rob
  • 14,746
  • 28
  • 47
  • 65
Single Entity
  • 2,925
  • 3
  • 37
  • 66
  • Why use jQuery to do this when you have (the far more appropriate) CSS available? – Rory McCrossan Oct 17 '16 at 09:24
  • I am using CSS to style the trackbar, I wish to use jQuery to change the css programmatically based on client taste. – Single Entity Oct 17 '16 at 09:25
  • I prefere to use `.addClass('other-background-color')` if you like to use jQuery and CSS – pleinx Oct 17 '16 at 09:27
  • The colours are defined by the client, I can't have additional classes on standby. – Single Entity Oct 17 '16 at 09:28
  • I think there is no way. jQuery and access pseudo classes doesnt work. – pleinx Oct 17 '16 at 09:30
  • the issue you have is that jQuery cannot target pseudo selectors (ie. `::moz-range-thumb`) so what you are trying to do is not possible. – Rory McCrossan Oct 17 '16 at 09:30
  • Not so nice but an idear... create a css class on the fly... (write inline of document) with your special background color for this current client ... after created css class you add the class via jquery. EDIT: see here what im meaning with on the fly: http://stackoverflow.com/questions/1212500/create-a-css-rule-class-with-jquery-at-runtime – pleinx Oct 17 '16 at 09:32
  • @pleinx this was my fallback option thanks. Its nasty though – Single Entity Oct 17 '16 at 09:35
  • Could you share your markup as well? I may help you out, but I'd need some markup at least. A fiddle would be ideal. – Aer0 Oct 17 '16 at 09:36

2 Answers2

0

I prefer to use .addClass('other-background-color') and style the controls via CSS.

But the questioner needs to do this client based. So jQuery and pseudo selectors don't work.

One idea is to create the class with different background "on the fly" and add this via jQuery .addClass('user-background')

Here you see what I'm meaning with "on the fly": Create a CSS rule / class with jQuery at runtime

Community
  • 1
  • 1
pleinx
  • 616
  • 3
  • 8
0

You don't need any JavaScript for that. Your CSS seems to be fine so far. To avoid your slider thumb to stick to its original state, you need to tell your browser to stop using its defaults.

For Firefox you would add this:

input[type=range],
input[type=range]::-moz-range-thumb {
  -moz-appearance: none;
}

On Chrome you would use this:

input[type=range],
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
}

EDIT

In order to dynamically set your thumbs color, you may use JavaScript to alter your CSS. An example could look like this. https://jsfiddle.net/tet9fm6m/

document.styleSheets[0].addRule('input[type=range]::-webkit-slider-thumb', 'background: green');

To do so, just leave the background color in your css file blank. Otherwise your JavaScript setup would get overwritten.

Aer0
  • 3,792
  • 17
  • 33
  • I think you may have misunderstood my question. – Single Entity Oct 17 '16 at 11:16
  • What do you mean exactly with the button itself? The Slider Thumb? – Aer0 Oct 17 '16 at 11:30
  • The question is about programmatically changing the css property using jQuery/javascript to make it responsive to a clients needs, I am not using browser default styling. The css I quoted in the question is an example of the css styling I am already applying to the Slider Thumb in CSS. I now need to change that at run-time should the client wish to. Am I making sense? – Single Entity Oct 17 '16 at 11:53
  • @Single Entity Well, I guess I've really misunderstood you. Edited my answer accordingly. – Aer0 Oct 17 '16 at 12:19
  • No worries, it was probably my question not being clear enough. – Single Entity Oct 17 '16 at 13:29