CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-ui
Rachel Dockter
Rachel Dockter

Reputation: 986

Customising Jquery UI slider styles

I'm not that experienced with jquery but ive managed to put a jquery ui price slider in my html, specificly this one - https://jqueryui.com/resources/demos/slider/range.html

Now im trying to customise it. I would like to change stuff like the hover, drag color, make them circle sliders and also a thin like instead of a thick but i cant find any documentation online on how to.

Ive tried to inspect element and get the class from there which only worked for disabling the outline of a slider.

.ui-slider-handle {
  outline: 0;
  background: purple;
  border-radius: 50%;
}

So i know this targets the slider but changing the colour or border radius does not do anything. My css is declared after the jquery ui css so surely mine should overwrite it.

Upvotes: 2

Views: 3509

Answers (1)

andreas
andreas

Reputation: 16936

You can customize the styles of the slider by using a higher specificity than jQuery. This way you don't have to bother, which CSS declarations were first included, the rules with higher specificity will apply.

Here is a working example. I increased the specificity by using the parent selector #slider in addition to the class selectors of the different elements:

$(function() {
  $("#slider").slider();
});
#slider .ui-slider-handle {
  outline: 0;
  background: purple;
  border-radius: 50%;
  top: -.6em;
}

#slider.ui-slider-horizontal {
  top: 1em;
  left: 5%;
  height: .1em;
  width: 90%;
  border: none;
  background: #ccc;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="slider"></div>

Upvotes: 2

Related Questions