Opened 8 years ago

Closed 8 years ago

#10752 closed bug (notabug)

Set background image as Handles with appropreate positioning and alignment

Reported by: sszelei Owned by:
Priority: minor Milestone: none
Component: ui.slider Version: 1.11.2
Keywords: Cc:
Blocked by: Blocking:


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.


.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.

Change History (1)

comment:1 Changed 8 years ago by Scott González

Resolution: notabug
Status: newclosed

This doesn't sound like a bug report. It doesn't even sound like a feature request. I'm not even sure if this is a support question since there doesn't appear to be a question, but rather just a bunch of statements and code samples. You should probably use the forums or Stack Overflow if you actually have a question.

Note: See TracTickets for help on using tickets.