Bereich mit benutzerdefinierten Daumen erreicht nicht das Ende des Titels, CSS

Question

Ich versuche, das Problem herauszufinden, aber da ich nicht Css Guru bin brauche ich die Hilfe.

Ich habe Slider und ich versuche, benutzerdefinierte Bild auf slider-thumb einzustellen.

Die Frage ist: slider-thumb Minimal- und Maximalposition nicht erreichen, am Ende des Bereichs:

Dies ist eine Demo ich mit spielen:

DEMO - versucht Daumen bottom-up

zu bewegen

---

Dies ist ein Code (BTW I Ionic verwenden)

<div class="aa-volume wm-volume-range range" style="position: absolute;top: 3rem;left: 0rem;">        
         <input type="range" name="volume"          
           min="0" max="100" 
           value="{{displayDevice.fan_volume.value}}" ng-model="displayDevice.fan_volume.value" integer 
     style="max-width: 8rem;width: 8rem;min-width: 8rem;">        
</div> 

und CSS:

.wm-volume-range.range { 
    -ms-transform: rotate(-90deg); 
    /* IE 9 */ 
    -webkit-transform: rotate(-90deg); 
    /* Chrome, Safari, Opera */ 
    transform: rotate(-90deg); 
} 
.wm-volume-range.range i.icon { 
    -ms-transform: rotate(90deg); 
    /* IE 9 */ 
    -webkit-transform: rotate(90deg); 
    /* Chrome, Safari, Opera */ 
    transform: rotate(90deg); 
} 

.wm-volume-range.range span { 
    -ms-transform: rotate(90deg); 
    /* IE 9 */ 
    -webkit-transform: rotate(90deg); 
    /* Chrome, Safari, Opera */ 
    transform: rotate(90deg); 
} 

.aa-volume input[type="range"]::-webkit-slider-thumb { 
-webkit-appearance: none; 
      width: 38px; 
      height: 16px; 

      border-radius: 0px; 
      background-image: url('http://www.lesliesanford.com/vst/knobman/files/slider-thumbs/SimpleSliderThumb.png'), 

      -webkit-gradient(
       linear, 
       left top, 
       left bottom, 
       color-stop(1, #a1a1a1) 
      ); 
      -webkit-transform: rotate(90deg); 
      -moz-transform: rotate(90deg); 
      -ms-transform: rotate(90deg); 
      -o-transform: rotate(90deg); 
      transform: rotate(90deg); 
      background-size: 48px 24px; 
      background-repeat: no-repeat; 
      background-position: 50%; 

} 

jemand Hilfe, um es zu lösen?

Answer 1

Das Problem ist, dass wenn Sie rotate Ihren Daumen behält es seine Mitte und es erreicht nicht das Ende der Spur. Wenn Sie nicht es drehen, es works

1. Der einfachste Weg wäre es, die Datei Bild zu drehen, bevor es als background-image Ihrer Bereich Daumen setzen.

2. Andernfalls können Sie einen benutzerdefinierten Daumen erstellen und ihn bewegen, um dem echten versteckten Cursor zu folgen. Sie können ein Beispiel here (der zweite Bereich) sehen.