Styling jQuery UI for a two-color Range

Question

I've styled a jQuery UI slider by modifying the default UI theme but I'm stuck on one detail - I'd like to have the slider range before the slider handle colored differently from the range after the slider (similar to an iOS slider). Are there selectors in the UI theme to achieve this, or will I need to find another solution? Currently I'm overriding the default .ui-slider and .ui-slider-handle styles in my css:

.ui-slider {
   /* custom styles here */
}

.ui-slider-handle {
    /* custom styles here */
}

My current code can be viewed in a jsbin here: http://jsbin.com/uPUZosu/1/edit?html,css,js,output

Answer 1

Embarrassingly, the answer was right in front of me in the jQuery UI slider documentation. The selector to style the minimum range (the area before the slider handle) is .ui-slider-horizontal .ui-slider-range-min {}