Add old value as “ghost” thumb to Slider

Clash Royale CLAN TAG#URR8PPP

Add old value as “ghost” thumb to <input type=“range”> Slider

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
10 hours ago

@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
10 hours ago

Ah, I see. Then wouldn't you just simply have an overlay input range on top of it?
– George Daniel
10 hours ago

I fixed your js fiddle so that it works as you wanted.
– George Daniel
9 hours ago

1 Answer
1

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.

box-shadow

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>

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.