Range with custom thumb doesn't reach the end of track, CSS

Question

I try to find out the problem but since i'm not css guru I need the help.

I have slider and I try to set custom image on slider-thumb.

The issue is: slider-thumb minimum and maximum position do not reach at the end of range:

This is a demo I play with:

DEMO - try to move thumb bottom-up

---

This is a code (BTW I use Ionic)

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

and 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%;

}

Can anybody help to solve it?

Answer 1

The problem is that when you rotate your thumb it keeps its center and it doesn't reach the end of the track. If you don't rotate it, it works

1. The easiest way would be to rotate the file image before setting it as the background-image of your range thumb.

2. Otherwise, you can create a custom thumb and move it to follow the real hidden cursor. You can see an example here (the second range).