Styling an element based on range slider thumb hover

Question

I am trying to create a hover effect for a range slider thumb as well as some text that is always positioned to be on top of it.

I have the following code and I am not sure what set of CSS selectors I should be using in order to create the correct hover. I have tried + ~ but neither seem to work, even when changing the ordering of elements in the DOM.

The code in question is:

#range::-webkit-slider-thumb:hover + .range-value span  {
     color: #008e39;
}

The color of the text should turn green.

$( window ).on( "load", function() { 
    sliderValues();    
});

$( window ).resize(function() {
   sliderValues();  
});

let mouseDown;
$(document).mousedown(function() {
    mouseDown = true;
}).mouseup(function() {
    mouseDown = false;  
});


let stepChangeThreshold = 3000;


$('#range').on('mousemove',function(e){
    if (!mouseDown) return;
    
    this.previousClientX = this.previousClientX || e.clientX;
    let stepChangeThresholdPositionX = this.getBoundingClientRect().x+($('#range').width()*stepChangeThreshold/5500);
    
    
    if (this.value == stepChangeThreshold){
        if ((this.previousClientX > e.clientX) && (e.clientX < stepChangeThresholdPositionX)){
            this.step = 250;
        } else {
            this.step = 500;
        }
        
        
    }


    this.previousClientX = e.clientX;
});


$('#range').on('input', function() {    
  sliderValues();   

  var val = $('#range').val();  
  if (val >= stepChangeThreshold) {
      this.step = 500;
  } else {
      this.step = 250;
  };
  this.previousVal = val;
    
});

function sliderValues(){
    var val = $('#range').val();
    var min = $('#range').attr('min');
    var max = $('#range').attr('max');
    var portion = (val - min) / (max - min);
    $('#rangeV').html('<span>$'+ val +'</span>');
    $('#rangeV').css('left', portion * ($('#range').width() - 70));
    
    let thumbSliderRatio = (70/$('#range').width())*100;
    let fillPercent = Number(portion*(100-thumbSliderRatio) + thumbSliderRatio/2) + "%";
    
    $('#range').css('background','linear-gradient(to right, #008e39 0%, #008e39 ' + fillPercent + ', #ccc ' + fillPercent + ', #ccc 100%)');     
};

#range {
    -webkit-appearance: none;
    margin: 20px 0;
    width: 100%;
    background: linear-gradient(to right, #008e39 0%, #008e39 50%, #ccc 50%, #ccc 100%);
    border-radius: 8px;
    height: 7px;
    width: 100%;
    outline: none;
    
}
#range:focus {
    outline: none;
}

#range::-webkit-slider-thumb {
    height: 70px;
    width: 70px;
    border: 3px solid #008e39;
    border-radius: 50%;
    background-color: #008e39;
    cursor: pointer;
    -webkit-appearance: none;
    transform: translateY(-65px);
}

#range::-webkit-slider-thumb:hover {
    background-color: white;
}

#range::-webkit-slider-thumb:hover + .range-value span  {
    color: #008e39;
}

#range::-moz-range-thumb {
    height: 70px;
    width: 70px;
    border-radius: 50%;
    background-color: #008e39;
    cursor: pointer;
    border: none;
    transform: translateY(-65px);  
}

.range-wrap{
    width: 90%;
    position: relative;
    margin: auto;
    margin-top: 120px;
}
.range-value{
    position: absolute;
}
.range-value span{
    width: 70px;
    height: 70px;
    text-align: center;
    color: #fff;
    font-size: 20px;
    line-height: 48px;
    display: block;
    position: absolute;
    pointer-events: none;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    margin-top: -64px;
    z-index: 1;
}

.range-value span:after {
    content: "";
    position: absolute;
    width: 0;
    height: 36px;
    border: 2px solid #008e39;
    top: 55px;
    left: calc(50% - 1px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="range-wrap">
                        <div class="range-value" id="rangeV"></div>
                        <input id="range" type="range" min="500" max="5000" step="250" value="1000">
                    </div>

for now all i can give you as a try for helping is this post: https://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-one-element-is-hovered There are some very nice explanations about the different selectors in the answers. Maybe that can help you out — Warden330, Sep 18 '20 at 06:06
`#range::-webkit-slider-thumb:hover + .range-value span` can absolutely not work - `.range-value` comes _before_ `#range` in the DOM. And even if you change the order, this likely won’t work - you can only select _siblings_ using `+` or `~`, the range slider thumb probably gets rendered further down in some shadow DOM tree. — CBroe, Sep 18 '20 at 06:25
@CBroe thank you for pointing that out about it being rendered in the shadow DOM. Any idea on how to do this through JS or Jquery? — evilgenious448, Sep 18 '20 at 06:26
Trying to select the slider thumb via JS/jQuery, is likely going to have the same issue, as https://stackoverflow.com/q/5041494/1427878 — CBroe, Sep 18 '20 at 06:31
yeah i couldnt find a way to just select the slider thumb with JQuery. It is not hard to change the span css when hovering the #range itself, but that would also change on occasions where you dont want it to — Warden330, Sep 18 '20 at 06:32
Any workaround ways to do this. I just need the text to be green on hover of the thumb. Happy to use CSS, JS, Jquery, whatever works. — evilgenious448, Sep 18 '20 at 06:33

Warden330 · Answer 1 · 2020-09-18T06:58:32.083

Workaround that changes stuff when you go anywhere on the slider. Thats the best i could find. It kiiinda makes sense cause you can drag the slider or click on the range anywhere anyway. Maybe that works for you?

$( window ).on( "load", function() { 
    sliderValues();    
});

$( window ).resize(function() {
   sliderValues();  
});

let mouseDown;
$(document).mousedown(function() {
    mouseDown = true;
}).mouseup(function() {
    mouseDown = false;  
});


let stepChangeThreshold = 3000;


$('#range').on('mousemove',function(e){
    if (!mouseDown) return;
    
    this.previousClientX = this.previousClientX || e.clientX;
    let stepChangeThresholdPositionX = this.getBoundingClientRect().x+($('#range').width()*stepChangeThreshold/5500);
    
    
    if (this.value == stepChangeThreshold){
        if ((this.previousClientX > e.clientX) && (e.clientX < stepChangeThresholdPositionX)){
            this.step = 250;
        } else {
            this.step = 500;
        }
        
        
    }


    this.previousClientX = e.clientX;
});


$('#range').on('input', function() {    
  sliderValues();   

  var val = $('#range').val();  
  if (val >= stepChangeThreshold) {
      this.step = 500;
  } else {
      this.step = 250;
  };
  this.previousVal = val;
    
});



function sliderValues(){
    var val = $('#range').val();
    var min = $('#range').attr('min');
    var max = $('#range').attr('max');
    var portion = (val - min) / (max - min);
    $('#rangeV').html('<span>$'+ val +'</span>');
    $('#rangeV').css('left', portion * ($('#range').width() - 70));
    
    let thumbSliderRatio = (70/$('#range').width())*100;
    let fillPercent = Number(portion*(100-thumbSliderRatio) + thumbSliderRatio/2) + "%";
    
    $('#range').css('background','linear-gradient(to right, #008e39 0%, #008e39 ' + fillPercent + ', #ccc ' + fillPercent + ', #ccc 100%)');     
};

#range {
    -webkit-appearance: none;
    margin: 20px 0;
    width: 100%;
    background: linear-gradient(to right, #008e39 0%, #008e39 50%, #ccc 50%, #ccc 100%);
    border-radius: 8px;
    height: 7px;
    width: 100%;
    outline: none;

}
#range:focus {
    outline: none;
}

#range::-webkit-slider-thumb {
    height: 70px;
    width: 70px;
    border: 3px solid #008e39;
    border-radius: 50%;
    background-color: #008e39;
    cursor: pointer;
    -webkit-appearance: none;
    transform: translateY(-65px);
}

/*this is new*/
.range-wrap:hover  .range-value span{
    color: #008e39;
}
.range-wrap:hover  #range::-webkit-slider-thumb{
    background-color: white;
}
#range:hover{
    cursor: pointer;
}
/*end of new*/

#range::-moz-range-thumb {
    height: 70px;
    width: 70px;
    border-radius: 50%;
    background-color: #008e39;
    cursor: pointer;
    border: none;
    transform: translateY(-65px);
}

.range-wrap{
    width: 90%;
    position: relative;
    margin: auto;
    margin-top: 120px;
}
.range-value{
    position: absolute;
}
.range-value span{
    width: 70px;
    height: 70px;
    text-align: center;
    color: #fff;
    font-size: 20px;
    line-height: 48px;
    display: block;
    position: absolute;
    pointer-events: none;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    margin-top: -64px;
    z-index: 1;
}

.range-value span:after {
    content: "";
    position: absolute;
    width: 0;
    height: 36px;
    border: 2px solid #008e39;
    top: 55px;
    left: calc(50% - 1px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="range-wrap">
                        <div class="range-value" id="rangeV"></div>
                        <input id="range" type="range" min="500" max="5000" step="250" value="1000">
                    </div>

I have slightly adapted your answer to make it fully function. Really appreciate you answering as you gave me the idea and direction I needed to get it to work. — evilgenious448, Sep 18 '20 at 07:20

score 0 · Accepted Answer · answered Sep 18 '20 at 07:16

Thanks for all of the suggestions everyone, I worked it out using pure CSS. The issue was that you can not really use the :webkit-slider-thumb as a selector to style CSS elements.

To workaround this I used the #range as the selector. That brought up the effect triggering if I mouse anywhere on the range slider. Therefore I set the pointer-events: none; on the range and pointer-events: auto; on the range thumb.

I needed to reorder the elements in my HTML and fix up a few styles in the CSS

$( window ).on( "load", function() { 
    sliderValues();    
});

$( window ).resize(function() {
   sliderValues();  
});

let mouseDown;
$(document).mousedown(function() {
    mouseDown = true;
}).mouseup(function() {
    mouseDown = false;  
});


let stepChangeThreshold = 3000;


$('#range').on('mousemove',function(e){
    if (!mouseDown) return;
    
    this.previousClientX = this.previousClientX || e.clientX;
    let stepChangeThresholdPositionX = this.getBoundingClientRect().x+($('#range').width()*stepChangeThreshold/5500);
    
    
    if (this.value == stepChangeThreshold){
        if ((this.previousClientX > e.clientX) && (e.clientX < stepChangeThresholdPositionX)){
            this.step = 250;
        } else {
            this.step = 500;
        }
        
        
    }


    this.previousClientX = e.clientX;
});


$('#range').on('input', function() {    
  sliderValues();   

  var val = $('#range').val();  
  if (val >= stepChangeThreshold) {
      this.step = 500;
  } else {
      this.step = 250;
  };
  this.previousVal = val;
    
});

function sliderValues(){
    var val = $('#range').val();
    var min = $('#range').attr('min');
    var max = $('#range').attr('max');
    var portion = (val - min) / (max - min);
    $('#rangeV').html('<span>$'+ val +'</span>');
    $('#rangeV').css('left', portion * ($('#range').width() - 70));
    
    let thumbSliderRatio = (70/$('#range').width())*100;
    let fillPercent = Number(portion*(100-thumbSliderRatio) + thumbSliderRatio/2) + "%";
    
    $('#range').css('background','linear-gradient(to right, #008e39 0%, #008e39 ' + fillPercent + ', #ccc ' + fillPercent + ', #ccc 100%)');     
};

#range {
    -webkit-appearance: none;
    margin: 20px 0;
    width: 100%;
    background: linear-gradient(to right, #008e39 0%, #008e39 50%, #ccc 50%, #ccc 100%);
    border-radius: 8px;
    height: 7px;
    width: 100%;
    outline: none;
    pointer-events: none;
    
}
#range:focus {
    outline: none;
}

#range::-webkit-slider-thumb {
    height: 70px;
    width: 70px;
    border: 3px solid #008e39;
    border-radius: 50%;
    background-color: #008e39;
    cursor: pointer;
    -webkit-appearance: none;
    transform: translateY(-65px);
    pointer-events: auto;
}

#range::-webkit-slider-thumb:hover {
    background-color: white;
}

#range:hover ~ .range-value span  {
    color: #008e39;
}

#range::-moz-range-thumb {
    height: 70px;
    width: 70px;
    border-radius: 50%;
    background-color: #008e39;
    cursor: pointer;
    border: none;
    transform: translateY(-65px);  
}

.range-wrap{
    width: 90%;
    position: relative;
    margin: auto;
    margin-top: 120px;
}
.range-value{
    position: absolute;
}
.range-value span{
    width: 70px;
    height: 70px;
    text-align: center;
    color: #fff;
    font-size: 20px;
    line-height: 48px;
    display: block;
    position: absolute;
    pointer-events: none;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    margin-top: -110px;
    z-index: 1;
}

.range-value span:after {
    content: "";
    position: absolute;
    width: 0;
    height: 36px;
    border: 2px solid #008e39;
    top: 55px;
    left: calc(50% - 1px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="range-wrap">
        <input id="range" type="range" min="500" max="5000" step="250" value="1000">
        <div class="range-value" id="rangeV"></div> 
                    </div>

Styling an element based on range slider thumb hover

2 Answers2