Search code examples
cssjquery-uijquery-ui-sliderjquery-ui-slider-pips

Change the color of the selector circle to a slider range in Best jQuery library


I created a slider range using the Best jQuery library. Thanks to a previous question I managed to make some changes that interested me.

Now I would just like to be able to change the color of the circle that appears above the selected year.

Now it's blue when the user moves it, and becomes gray. I wish it was always blue.

Here the code.

To get what I would like, I tried to edit the CSS this way, but I didn't get any changes.

#circles-slider .ui-slider-handle {
    border-radius: 13px;
    height: 13px;
    width: 13px;
    top: -3.5px;
    margin-left: -8px;
    border: 1px solid whitesmoke;
    background-color: steelblue;
}

/*#circles-slider .ui-slider-handle .ui-state-default .ui-corner-all {*/
#circles-slider .ui-slider .ui-slider-handle {
    background-color: steelblue;
    fill: steelblue;
    color: steelblue;
}
#circles-slider.ui-slider .ui-slider-handle.ui-state-hover, 
#circles-slider.ui-slider .ui-slider-handle.ui-state-focus, 
#circles-slider.ui-slider .ui-slider-handle.ui-state-active {
    background-color: steelblue;
    fill: steelblue;
    color: steelblue; 
}

Thanks to anyone who wants to help me.


Solution

  • just change from background-color to background:
    
    #circles-slider .ui-slider-handle {
        border-radius: 13px;
        height: 13px;
        width: 13px;
        top: -3.5px;
        margin-left: -8px;
        border: 1px solid whitesmoke;
        background: steelblue;
    }