CODEWITHSUNDEEP
jqueryhtmlcsswordpressrangeslider
Code4Bread
Code4Bread

Reputation: 193

Change Range Slider Handle Color (On Click)

<div id="slider">
    <br><span>0</span>
    <span style="margin-left: 3.3%">100</span>
    <span style="margin-left: 9.8%">300</span>
    <span style="margin-left: 16.4%">600</span>
    <span style="margin-left: 16.2%">900</span>
    <span style="margin-left: 15.7%">1200</span>
    <span style="margin-left: 13.3%">1500</span>
</div>

I am using default jquery range slider. When the handle is clicked, the handle head change into a blue one(As shown in picture). I am adding this raw html into wordpress theme. It works fine on local testing(without wordpress theme). Is there anyway to overwrite the color on click. Blue and my website theme doesn't go well.

Normal Normal On Click On Click

Upvotes: 1

Views: 2771

Answers (2)

Tony M
Tony M

Reputation: 741

Using devtools, you'll notice the CSS changes applied when you've clicked the handle. Just make note of the CSS line number when you've clicked and that rule is what you need to change. It is likely going to be this:

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
	border: 1px solid #000;/*changed this to black*/
	background: #000;/*changed this to black*/
	font-weight: normal;
	color: #ffffff;
}

If it gets overridden, then of course use higher selectors such as body at the beginning and !important as a last resort.

Upvotes: 1

Barry Chapman
Barry Chapman

Reputation: 6780

See the following pen:

https://codepen.io/barrychapman/pen/vmyjLR

Simply apply the background-color css property with !important to the selector:

#slider-range > span.ui-slider-handle:active {
    background-color: #0B0 !important;
}

And you should be good to go. Check the pen for results.

Upvotes: 0

Related Questions