Set background image as Handles with appropreate positioning and alignment

A non-symmetric background can be added that will not be positioned or aliened appropriately.

add attributes to access the internal handles and allow for rotation, translation, and horizontal and vertical flip.

could be a different bug but allow for each handle to have a different image associated.

in this example DualSlide is a non-symmetric image. to look correct the right image is required to be flipped.

<style>

.ui-slider-horizontal .ui-state-default {background: url(DualSlide.png) no-repeat scroll;}

.ui-slider-horizontal .ui-slider-handle {

margin-left:-0.2em;

top:-0.6em;

}

.ui-slider .ui-slider-handle {

cursor:default;

height:9.0em;

position:absolute;

width:3.0em;

z-index:2;

border:none;

back

}

The internal second div which is the right image need to be found

in this case I added the id attribute to the first span as sh1 and the second span gets sh2

flip the right image.

<div class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" id="slider-range">

<div class="ui-slider-range ui-widget-header ui-corner-all" style="left: 0%; width: 45.6%;">

</div>

<span tabindex="0" class="ui-slider-handle ui-state-default ui-corner-all" id="sh1" style="left: 0%;"></span>

<span tabindex="0" class="ui-slider-handle ui-state-default ui-corner-all" id="sh2" style="left: 45.6%;"></span>

</div>

#sh2 {

-moz-transform: scaleX(-1);

-o-transform: scaleX(-1);

-webkit-transform: scaleX(-1);

transform: scaleX(-1);

filter: FlipH;

-ms-filter: "FlipH";

}

the left image need to get aligned so that the right most side of the image lines up with the 0% of the slide bar.

once the right image is flipped it aligns properly.