title: Styling an element based on range slider thumb hover
body: <p>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.</p>
  <p>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 <code>+ ~</code> but neither seem to work, even when changing the ordering of elements in the DOM.</p>
  <p>The code in question is:</p>
  <pre><code>#range::-webkit-slider-thumb:hover + .range-value span  {
       color: #008e39;
  }
  </code></pre>
  <p>The color of the text should turn green.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$( 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 &gt; e.clientX) &amp;&amp; (e.clientX &lt; stepChangeThresholdPositionX)){
              this.step = 250;
          } else {
              this.step = 500;
          }
          
          
      }
  
  
      this.previousClientX = e.clientX;
  });
  
  
  $('#range').on('input', function() {    
    sliderValues();   
  
    var val = $('#range').val();  
    if (val &gt;= 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('&lt;span&gt;$'+ val +'&lt;/span&gt;');
      $('#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%)');     
  };</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#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);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="range-wrap"&gt;
                          &lt;div class="range-value" id="rangeV"&gt;&lt;/div&gt;
                          &lt;input id="range" type="range" min="500" max="5000" step="250" value="1000"&gt;
                      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>