Solution 1 :

Basically what you do is shrink the volume scale below the thumb to fit the start and end position. Then add a margin on the left to push the scale image to the starting position.
Then exchange the background of the range slider itself to use a gradient with opacity on the edges (left and right) to make sure the slider knob moves to the end positions of the slider and does not still show some black pixels.

The code should now work in Chrome and Firefox.

Code:

.volume {
  -webkit-appearance: none;
  width: 120px;
  background: transparent;
}

.volume:focus {
  outline: none;
}

.volume::-webkit-slider-runnable-track {
  height: 5px;
  cursor: pointer;
  background: rgba(0, 0, 0, 0);
  background: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 12%, rgba(0, 0, 0, 1) 12%, rgba(0, 0, 0, 1) 88%, rgba(0, 0, 0, 0) 88%, rgba(0, 0, 0, 0) 100%);
  background: -webkit-gradient(left top, right top, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(12%, rgba(0, 0, 0, 0)), color-stop(12%, rgba(0, 0, 0, 1)), color-stop(88%, rgba(0, 0, 0, 1)), color-stop(88%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0)));
  background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 12%, rgba(0, 0, 0, 1) 12%, rgba(0, 0, 0, 1) 88%, rgba(0, 0, 0, 0) 88%, rgba(0, 0, 0, 0) 100%);
  background: -o-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 12%, rgba(0, 0, 0, 1) 12%, rgba(0, 0, 0, 1) 88%, rgba(0, 0, 0, 0) 88%, rgba(0, 0, 0, 0) 100%);
  background: -ms-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 12%, rgba(0, 0, 0, 1) 12%, rgba(0, 0, 0, 1) 88%, rgba(0, 0, 0, 0) 88%, rgba(0, 0, 0, 0) 100%);
  background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 12%, rgba(0, 0, 0, 1) 12%, rgba(0, 0, 0, 1) 88%, rgba(0, 0, 0, 0) 88%, rgba(0, 0, 0, 0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#000000', GradientType=1);
}

.volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: 1px solid #444;
  width: 30px;
  height: 16px;
  text-align: center;
  margin-top: -5.5px;
  background: url("https://prototype.demixr.com/media/slider.png") center no-repeat;
}

input[type=range]::-moz-range-track {
  height: 5px;
  cursor: pointer;
  background: rgba(0, 0, 0, 0);
  background: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 12%, rgba(0, 0, 0, 1) 12%, rgba(0, 0, 0, 1) 88%, rgba(0, 0, 0, 0) 88%, rgba(0, 0, 0, 0) 100%);
  background: -webkit-gradient(left top, right top, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(12%, rgba(0, 0, 0, 0)), color-stop(12%, rgba(0, 0, 0, 1)), color-stop(88%, rgba(0, 0, 0, 1)), color-stop(88%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0)));
  background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 12%, rgba(0, 0, 0, 1) 12%, rgba(0, 0, 0, 1) 88%, rgba(0, 0, 0, 0) 88%, rgba(0, 0, 0, 0) 100%);
  background: -o-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 12%, rgba(0, 0, 0, 1) 12%, rgba(0, 0, 0, 1) 88%, rgba(0, 0, 0, 0) 88%, rgba(0, 0, 0, 0) 100%);
  background: -ms-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 12%, rgba(0, 0, 0, 1) 12%, rgba(0, 0, 0, 1) 88%, rgba(0, 0, 0, 0) 88%, rgba(0, 0, 0, 0) 100%);
  background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 12%, rgba(0, 0, 0, 1) 12%, rgba(0, 0, 0, 1) 88%, rgba(0, 0, 0, 0) 88%, rgba(0, 0, 0, 0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#000000', GradientType=1);
}

input[type=range]::-moz-range-thumb
{
  -webkit-appearance: none;
  border: 1px solid #444;
  width: 30px;
  height: 16px;
  text-align: center;
  margin-top: -5.5px;
  background: url("https://prototype.demixr.com/media/slider.png") center no-repeat;
}

.levels_steps {
  width: 90px;
  margin-left: 17px;
}
<input class="d-inline-block volume" type="range" name="volume0" id="volume0" data-id="0" min="0" max="1" value="0.5" step="0.01">
<br />
<img src="https://prototype.demixr.com/media/ruler.png" alt="slider steps" class="levels_steps">

In normal cases I would have assigned the CSS rules to both Firefox and Chrome in one rule (.volume::-webkit-slider-runnable-track, .input[type=range]::-moz-range-track { ... } but this either made the changes disappear in Chrome or Firefox so I duplicated it. Might be due to the browser-specific prefixes -moz and -webkit.

Problem :

I have a range input like so:

.volume{
    -webkit-appearance:none;
    width:100px;
    background:transparent;
}
.volume:focus{
    outline:none;
}
.volume::-webkit-slider-runnable-track{
    height:5px;
    cursor:pointer;
    background:Black;
    border:0.5px solid DimGrey;
    border-radius:5px;
}
.volume::-webkit-slider-thumb{
    -webkit-appearance:none;
    border:1px solid #444;
    width:30px;
    height:16px;
    text-align:center;
    margin-top:-5.5px;
    background:url("https://prototype.demixr.com/media/slider.png") center no-repeat;
}
<input class="d-inline-block volume" type="range" name="volume0" id="volume0" data-id="0" min="0" max="1" value="0.5" step="0.01">
<br />
<img src="https://prototype.demixr.com/media/ruler.png" alt="slider steps" class="levels_steps">

Is it possible to get the thumb image to overflow the track so that the center of the image lines up with the ruler underneath when it is at the extreme of either side?

Comments

Comment posted by Paulie_D

Hmmm doubtful…You might be able to do someting with a

Comment posted by Paddy Hallihan

@Paulie_D I’m open to js/jquery options if its possible not even sure how i’d go about it though

Comment posted by Paulie_D

I’m not really conversant with JS but my guess is that it would be necessary to offset the position of the thumb in relation to the value of the input at each point.

Comment posted by Paddy Hallihan

Hi thanks for your answer but thats not really what i’m looking for, the image positioning doesn’t really matter, what I want is the thumb image to go past the track so the white line in the middle lines up with the end, so given that it is 30px wide i want it to go 15 px past either end of the track

Comment posted by SaschaM78

OK, in Chrome it looks totally different than in Firefox, now I know what you mean. I’ll update my answer accordingly.

Comment posted by SaschaM78

@PaddyHallihan I updated the code and hope we are getting in the right direction.

Comment posted by Paddy Hallihan

Thanks again yeah i had thought about resizing the ruler image but i’d like to keep that the length of the track and have the thumb overflow it but i’m starting to think thats not possible

Comment posted by Paddy Hallihan

or is it possible to extend the track itself but make the extended bit on either side transparent?

By

Leave a Reply

Your email address will not be published. Required fields are marked *