Question

Can a jQuery UI Slider be made to look like this? If so how?

Answer 1

Edit: It is possible when using range slider

DEMO

#slider {
 margin: 10px;
 height: 3px;    
}
#slider a {
    background-image: url("<!-- Your image -->") !important;
}

#slider .ui-slider-range { background-color: #58BEEA; background-image: none; }

It is possible to change the jQuery slider a bit like what you have, but the blue & grey part signifying the progressed area is not possible just with CSS for a regular slider.

You can take it to the extreme of adding div.. but it is too much of stuff for a simple slider.

#slider {
 margin: 10px;
 height: 3px;    
}
#slider a {
    background-image: url("<!-- Your image for sider-->") !important;
}

DEMO