jQuery change css of given class within an id

Question

$('#slider1 .rangeslider__handle').css("border", "4px solid #99cc44");

That syntax doesn't work for changing the border of only that class within the given id. I tried also

$.fn.hasAncestor = function(a) {
    return this.filter(function() {
        return !!$(this).closest(a).length;
    });
};
$('.rangeslider__handle').hasAncestor('#slider1').css("border", "4px solid #99cc44").change();

and

$('#slider1').find('.rangeslider__handle').css("border", "4px solid #99cc44");

$('#slider1 .rangeslider__handle').css({"border", "4px solid #99cc44"}); watch the curly brackets — Psi
– Psi, Commented Mar 6, 2017 at 0:03
Is this script executing after the element is created or is the element created dynamically? An easy way to check if you are actually selecting anything at all is just use the JavaScript console in the browser developer tools. Just type in the select part $('#slider1 .rangeslider__handle') and the console should print the jQuery result. — Joseph Shih
– Joseph Shih, Commented Mar 6, 2017 at 0:07
@Psi: His code was correct without curly brackets. But if you want to use curly bracket (usefull for more than one CSS attribute change), you have you use : instead of a coma between the attribute and the value. ;) — Louys Patrice Bessette
– Louys Patrice Bessette, Commented Mar 6, 2017 at 0:26
Oh, true, that's a mistake. Of course you need a colon. I was not aware of that notation in $.css — Psi
– Psi, Commented Mar 6, 2017 at 0:28

Louys Patrice Bessette · Accepted Answer · 2017-03-06 23:23:00Z

2

You are using the plugin named "Range Slider".

You certainly noticed that plugins creates new elements to achieve the nice visual effect, since your are after the element which has the .rangeslider__handle class.

This element is div child of another div which has the .rangeslider class.
And this one is the next sibling of the input type="range" from your initial HTML.

So, to target the handle starting for your input id, you can use .next() then .find() as in the below snippet.

I have placed the function on a button for clarity... and fun.

$(document).ready(function(){
 var sliderValueShow = $("#showValue");
     
  $('#slider1').rangeslider({
    polyfill: false,
    onSlide: function(position, value) {
      sliderValueShow.html(value);
    },
    onSlideEnd: function(position, value) {
      sliderValueShow.html(value);
    }
  });

  // Change the handle border color
  $("#setColor").click(function(){
    $('#slider1').next().find('.rangeslider__handle').css("border", "4px solid #99cc44");
  });
});

#main{
  text-align:center;
  padding:20px;
}
#showValue{
  font-size:3em;
}
button{
  border-radius:10px;
  background-color:cyan;
  padding:6px;
  outline:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.0/rangeslider.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.0/rangeslider.css" rel="stylesheet"/>


<div id="main">
  <input type="range" name="count" id="slider1" value="4" min="1" max="10"><br>
  <br>
  <span id="showValue">4</span><br>
  <br>
  <button id="setColor">Click me to change the handle border color</button>
</div>

edited Mar 6, 2017 at 23:23

answered Mar 6, 2017 at 7:30

Louys Patrice Bessette

34k7 gold badges41 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Roberto Over a year ago

Thank you, thank you Louys, yes that works perfectly

Roberto Over a year ago

I get this message now, but when the system lets me I will again: "Thanks for the feedback! Votes cast by those with less than 15 reputation are recorded, but do not change the publicly displayed post score."

Louys Patrice Bessette Over a year ago

lol... I didn't knew this restriction about VOTING was also applied on answers to your own questions. So I upvoted you... ;) You still miss 6 points... Keep on using SO and your rep will increase. Now, I'm sure that you can ACCEPT the answer. Look for the check mark near the voting arrows.

Roberto Over a year ago

Yes I accepted, thanks for letting me know about that too. I have the following question here outstanding for the last 3 days, nobody has replied, maybe you have time? stackoverflow.com/questions/42587578/…

Collectives™ on Stack Overflow

jQuery change css of given class within an id

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related