Add old value as "ghost" thumb to Slider

Question

I've styled a regular range slider using an example from w3schools. My goal is to send out a new value command to an external MQTT-based smarthome thing and show the old value as some kind of ghost-thumb first:

After the smarthome system confirms the new value, the bubble will be removed - but that's not my problem at this point. I would like to place the ghost between the background of the slider and the real-value-thumb, currently it looks like this:

Here you can see the result on JSFiddle, here's the code:

$('#slider_1').data('last-mqtt-value', 0.5);

$('#slider_1').on('input', function() {
  // Show ghost slider
  $('#slider_1_companion').css('left', 'calc('+ $(this).data('last-mqtt-value') / $(this).attr('max') +'* (100% - 20px))');
  $('#slider_1_companion').css('display', 'block');
});

$('#slider_1').on('change', function() {
  console.log( $(this).data('last-mqtt-value'), $(this).val() );

 // Simulate new input value incoming
  ///*
  setTimeout(() => {
    $(this).data('last-mqtt-value', $(this).val());
    $('#slider_1_companion').css('display', 'none');
  },5000);
  // */
});

.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 10px;
    border-radius: 5px;   
    background: #ccc;
    outline: none;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%; 
    background: #6c757d;
    cursor: pointer;
    z-index: 5;
}

.slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #6c757d;
    cursor: pointer;
    z-index: 5;
}
/*https://stackoverflow.com/a/46318225/1997890*/
.slider_wrapper {
    position: relative;
    width: 150px;
}
.slider_companion {
    background-color: #ccc;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    position: absolute;
    top: calc(100% - 19px); /* for some reason this is not 20px (height of thumb) */
    /* left: calc( PERCENTAGE * (100% - 20px)); /* add this line dynamically via jQuery */
    display: none;
    pointer-events: none; /*click-through*/
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="slider_1_wrapper" class="slider_wrapper">
  <div id="slider_1_companion" class="slider_companion"></div>
  <input type="range" id="slider_1" class="slider" min="0" max="1.0" step="any">
</div>

Umm, I simply added z-index: -1 to the slider-companion class... Seemed to work. — George Daniel, Jul 28 '18 at 12:04
@GeorgeDaniel yes because it will place the element behind all the slider and since we have the same color it will work, but if the color is not the same will have an issue ... so technically the *ghost* is not in between — Temani Afif, Jul 28 '18 at 12:09
Ah, I see. Then wouldn't you just simply have an overlay input range on top of it? — George Daniel, Jul 28 '18 at 12:16

Temani Afif · Accepted Answer · 2018-07-28T22:05:36.343

I would consider a box-shadow for the slider that you can adjust with CSS variable and no need for extra element and you will have the expected result.

Here is an idea:

$('#slider_1').data('last-mqtt-value', 0.5);

$('#slider_1').on('input', function() {
  document.getElementById('slider_1_wrapper').style.setProperty("--c", 
  ($(this).data('last-mqtt-value') -  $(this).val() )*130 + 'px');
  /*130 = 150 - 20 = width of wrapper - width of thumb*/
  
});

$('#slider_1').on('change', function() {
   console.log( $(this).data('last-mqtt-value'), $(this).val() );

 // Simulate new input value incoming
  ///*
  setTimeout(() => {
    $(this).data('last-mqtt-value', $(this).val());
    document.getElementById('slider_1_wrapper').style.setProperty("--c",0);
  },5000);
  // */
});

.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 10px;
    border-radius: 5px;   
    background: #ccc;
    outline: none;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%; 
    background: #6c757d;
    cursor: pointer;
    z-index: 5;
    box-shadow:var(--c,0) 0 0 red;
}

.slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #6c757d;
    cursor: pointer;
    z-index: 5;
    box-shadow:var(--c,0) 0 0 red;
}
.slider_wrapper {
    width: 150px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="slider_1_wrapper" class="slider_wrapper">
  <input type="range" id="slider_1" class="slider" min="0" max="1.0" step="any">
</div>

Awesome, haven't thought about simply using the box-shadow for this purpose. — dersimn, Jul 29 '18 at 12:35

Add old value as "ghost" thumb to Slider

1 Answers1