将旧值作为“重影”拇指添加到<input type="range">滑块中

Question

​

​

我已经使用example from w3schools设置了一个常规范围滑块的样式。我的目标是向外部的基于MQTT的smarthome发出一个新的value命令，并首先将旧的value显示为某种鬼拇指：

​

​

在smarthome系统确认新值后，气泡将被移除-但这不是我目前的问题。我想把重影放在滑块的背景和真实的拇指之间，目前它看起来是这样的：

​

​

你可以在这里看到result on JSFiddle，下面是代码：

​

$('#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>

​

Answer 1

我会考虑一个box-shadow的滑块，你可以调整与CSS变量，不需要额外的元素，你将有预期的结果。

这是一个想法：

​

$('#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>

​