jQuery UI Slider e modifica maniglia

Question

Uso il cursore standard jQueryUI e desidero modificare l'aspetto del quadratino. Ho cambiato il CSS per

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

ho fatto così, di avere la maniglia seduto in "slider-lane". Ma se la maniglia viene spostata nella posizione più a destra, si trova appena al di fuori della sua corsia. Ovviamente potrei impostare il margine di sinistra di .ui-slider-handle a -20px. Ma poi su entrambe le estremità si sovrappone alla sua corsia.

Ha qualcosa da fare con ui-slider-range-max? Ma quando ispeziona lo slider tramite Firebug, questa classe CSS non viene utilizzata da nessuna parte.

Answer 1

La classe ui-slider-range-max viene assegnata alla parte di intervallo di un cursore con un punto massimo fisso. Come questo: http://jqueryui.com/demos/slider/#rangemax

Se non si vede quella classe in Firebug allora forse non si sta usando quel tipo di cursore

Penso che quello che si sta chiedendo è come avere fermata bordo sinistro della maniglia nella parte il bordo sinistro della "corsia di scorrimento" e il bordo destro della maniglia non superano il bordo destro della "corsia di scorrimento". Ad esempio: la maniglia che si trova nella corsia di scorrimento

In tal caso, è possibile far apparire la maniglia all'interno della "corsia di scorrimento" rimuovendo prima lo sfondo e qualsiasi altra cosa visibile dal div di scorrimento dell'interfaccia utente.

esempio:

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

poi avvolgere il cursore all'interno di un div contenitore con lo sfondo. Il div contenitore può essere visto come "corsia a scorrimento" e puoi dargli il padding richiesto in modo che la maniglia sembrerà rimanere all'interno della corsia di scorrimento.

esempio:

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

ripristinare anche la maniglia margin-left indietro a quello che era, se si dispone di imbottitura a sinistra ea destra nel div contenitore, altrimenti basta usare padding sulla destra.