0

I want to change the background color of the thumb with jquery. I tried the following: 

<input id="size" type="range" name="size" min="2" max="10" step="0.01" value="5">

$('#color').click(function(){
    var col = ($(this)[0].checked) ? '#000' : '#FFF';
    $('input[type=range]::-webkit-slider-thumb').css('background-color', col);
});

But this gives me an

syntax error, unrecognized expression

How do i do this with Jquery?

FutureCake
  • 2,614
  • 3
  • 27
  • 70
  • FYI styling sliders is pretty complicated, https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/ – Marie Jan 11 '18 at 20:39
  • Can you provide the slider you want to change? – user3483203 Jan 11 '18 at 20:40
  • I added the html slider element for you – FutureCake Jan 11 '18 at 20:42
  • I know this doesn't answer the question but it might be easier for you to use the [jQuery UI slider plugin](https://jqueryui.com/slider/)? – Marc Bellêtre Jan 11 '18 at 20:43
  • @MarcBellêtre yeah this would work, but i dont want to add an entire library to do one basic thing once a while :) So i am still hoping for a solution using only jquery / javascript – FutureCake Jan 11 '18 at 20:45
  • What are web browser's that you have tested this code with? – SaidbakR Jan 11 '18 at 20:46
  • chrome, firefox, opera, safari – FutureCake Jan 11 '18 at 20:47
  • @FutureCake the last variable, `col` is undefined. This is the cause of the error. However, the style that you could not apply inline, you will not able to apply it using JavaScript. This feature is browser's UI feature like scroll bar, alert box, etc and you could not able to change it, simply, using just CSS. – SaidbakR Jan 11 '18 at 20:51
  • col is defined let me add some more code to explain – FutureCake Jan 11 '18 at 20:58

0 Answers0