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:
我使用w3schools的一个例子设计了常规范围滑块。我的目标是向外部基于MQTT的智能家居事物发送一个新的值命令,并将旧值显示为某种幽灵拇指:
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:
在这里你可以看到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://*.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>
1 个解决方案
#1
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.
我会考虑滑块的盒子阴影,您可以使用CSS变量调整,不需要额外的元素,您将获得预期的结果。
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>
#1
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.
我会考虑滑块的盒子阴影,您可以使用CSS变量调整,不需要额外的元素,您将获得预期的结果。
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>