I recently delved into the world of jQuery UI for the first time, and let me tell you, it's been quite the challenge. I've been attempting to create a slider that looks like this: https://i.sstatic.net/YZ3gM.png
However, I'm struggling to customize elements like .ui-slider .ui-slider-handle – nothing I try seems to work. I even attempted the following CSS to no avail:
.ui-slider-handle
{
background: url('../../img/slider/slide-dot.png') !important;
width:9px !important;
height:9px !important;
top:0px !important;
border:none !important;
}
The background image I'm trying to use for the handle is this dot: https://i.sstatic.net/pkliy.png
Despite my efforts, the handle simply disappears. The same issue persists with customizing the background of the slider itself, which is supposed to look like this: https://i.sstatic.net/YMlbi.png
If anyone could guide me through this maze, I would greatly appreciate it.
I stumbled upon this seemingly "perfect" codepen that I'd love to modify for my theme: https://codepen.io/ignaty/pen/EruAe
Thank you for taking the time to assist me – have a wonderful day!