jQuery UI Slider und Handle-Änderung

Question

Ich verwende den Standard-jQueryUI-Schieberegler und möchte das Aussehen des Handle ändern. Ich habe die CSS

.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 40px; height: 10px; cursor: default; border: 0; background-color: #c6c7c8; } 
.ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; } 

.ui-slider-horizontal { height: 10px; border: 0; background-color: #eceded; } 
.ui-slider-horizontal .ui-slider-handle { top: 0; margin-left: 0; } 
.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; } 
.ui-slider-horizontal .ui-slider-range-min { left: 0; } 
.ui-slider-horizontal .ui-slider-range-max { right: 0; } 

Ich tat es, den Griff zu haben, in der „Schieber-lane“ sitzen. Aber wenn der Griff in die Position ganz rechts bewegt wird, sitzt er gerade außerhalb seiner Spur. Natürlich könnte ich .ui-slider-handle Rand-links auf -20px setzen. Aber dann überlappt es an beiden Enden seine Spur.

Hat es etwas mit ui-slider-range-max zu tun? Bei der Überprüfung des Sliders über Firebug wird diese CSS-Klasse jedoch nirgendwo verwendet.

Answer 1

Die Klasse ui-slider-range-max wird dem Bereichsteil eines Schiebereglers mit einem festen maximalen Punkt zugewiesen. Wie folgt aus: http://jqueryui.com/demos/slider/#rangemax

Wenn Sie nicht sehen, dass die Klasse in Firebug dann vielleicht sind Sie nicht diese Art von Schieber mit

Ich denke, was Sie fragen, ist, wie der linke Rand Stopp der Griff zu haben, bei der linke Kante der "Slider-Lane" und die rechte Kante des Griffs nicht über den rechten Rand der "Slider-Lane". Dh: Der Griff sitzt in der Schieberspur

Wenn dies so ist, könnten Sie den Griff in der "Slider-Spur" zu bleiben, indem Sie zuerst den Hintergrund und alles andere sichtbar aus dem ui Slider div entfernen.

Beispiel:

.ui-slider-horizontal { height: 10px; border: 0; background: none } 

Dann wickeln Sie den Schieberegler in einem Container div mit Ihrem Hintergrund. Das Container-Div kann als "Slider-Lane" betrachtet werden und Sie können ihm die erforderliche Auffüllung geben, so dass der Griff in der Schieberegler-Spur zu bleiben scheint.

Beispiel:

.ui-slider-container { background-color: #eceded; padding: 0 0.6em;} 

zurückgesetzt auch den Griff margin-left zurück zu dem, was es war, wenn Sie padding haben links und rechts in den Behälter div, sonst nur padding verwenden, um auf der rechten Seite.