UPD2:檢查答案的標記答案。我在IOS上遇到了一個關于透明度的小問題，這個問題在你的情況下可能存在，也可能不存在。如果你也有這種經歷，請閱讀標記答案上的評論。干杯！
UPD:如果你想在上下文中看到它，請查看github repo: https://github . com/LitvinenkoD/activity-generator-based-on-Bored-API
這是GitHub頁面上的工作版本 https://litvinenkod . github . io/activity-generator-based-on-Bored-API/
我正在使用最小/最大范圍選擇器 & lt輸入類型= & quot范圍& quot& gt。
我希望選擇器的拇指在視覺上很小，但為了UX的目的有大的可點擊區域。
這是我需要的視覺效果
這是我想在引擎蓋下點擊的區域
我嘗試使用偽元素，但是::-moz-range-thumb和::-webkit-slider-thumb本身已經是偽元素了，所以沒有在它們上面添加隱藏偽元素的選項。
還有一個選項，添加一個不可見的邊界，然后做背景剪輯:填充框；，但這改變了輸入表單的功能，因為它認為拇指實際上要大得多，并影響了它們之間的范圍。
我的項目中有沒有可以使用的解決方案？只要我能實現我想要的功能，我可以做50行代碼。
在此添加代碼:
超文本標記語言
<div class="slider">
<input type="range" class="slider__min-selector" min="0" max="10" step="1">
<input type="range" class="slider__max-selector" min="0" max="10" step="1">
<div class="slider__background-range-box">
<div class="slider__range_visualizer"></div>
</div>
</div>
<!-- Adds selected values visualization -->
<div class="range-selector__supporting-text | flexbox-container">
<p class="range-selector__min-text">0</p>
<p class="range-selector__max-text">10</p>
</div>
</div>半鑄鋼?鋼性鑄鐵(Cast Semi-Steel)
input[type="range"]::-moz-range-thumb{
// Removing standard look
-moz-appearance: none;
border: none;
// Styling
background-color: #F0F0F0;
cursor: pointer;
// Visual size I need
height: 1em;
width: 1em;
border-radius: 50%;
// Needed for the thumb to be clickable
pointer-events: auto;
// I used the line below to demonstrate
// the clickable area size I need
border: 10px solid transparent;
// Adding this element allows me to hide
// the border, but the browser treats
// the element as it was actually larger
background-clip: padding-box;
}射流研究…
export class RangeSelector{
constructor(range_selector_min_tip, range_selector_max_tip, range_visualizer, current_range, sliders_min_gap, range_selector_min_text_visualizer, text_max){
this.range_selector_min_tip = range_selector_min_tip
this.range_selector_max_tip = range_selector_max_tip
this.range_visualizer = range_visualizer
// This array dynamically updates and always stores the value of min and max selectors
this.current_range = current_range
// Minimum acceptable distance between selectors
this.min_selectors_gap = sliders_min_gap
this.range_selector_min_text_visualizer = range_selector_min_text_visualizer
this.text_max = text_max
}
// Sets values of the actual tips equal to the values we initialized before
initializeSlider(){
this.range_selector_min_tip.value = this.current_range[0]
this.range_selector_max_tip.value = this.current_range[1]
}
// Updates the colored gap between two slider tips
adjustRangeVisualizer(){
const left = this.current_range[0] * 10
const right = 100 - this.current_range[1] * 10
this.range_visualizer.style.left = left + "%"
this.range_visualizer.style.right = right + "%"
}
updateRangeText(){
this.range_selector_min_text_visualizer.innerText = this.range_selector_min_tip.value
this.text_max.innerText = this.range_selector_max_tip.value
}
}我發現了一種最CSS的方法:使用radial-gradient()創建一個縮略圖，并根據& lt輸入& gt。
input[type="range"]::-webkit-slider-thumb {
height: var(--touch-size);
width: var(--touch-size);
background: radial-gradient(
circle at
calc(
(100% - var(--thumb-size)) / 10 * var(--value) +
var(--thumb-size) / 2
)
50%,
#f0f0f0 calc(var(--thumb-size) / 2),
transparent calc(var(--thumb-size) / 2)
);
}需要一點JS來修改內聯定制屬性:
inputs.forEach((element, isMax) => {
element.addEventListener('input', () => {
element.style.setProperty('--value', element.value);
});
});試試看:
const visualizer = document.querySelector('.slider__range_visualizer');
const inputs = document.querySelectorAll('input[type="range"]');
inputs.forEach((element, isMax) => {
element.addEventListener('input', () => {
const value = element.value;
element.style.setProperty('--value', value);
const property = isMax ? 'right' : 'left';
const percentage = (isMax ? 10 - value : value) * 10;
visualizer.style[property] = percentage + '%';
});
});:root {
--thumb-size: 20px;
--touch-size: 70px;
}
input[type="range"]::-webkit-slider-thumb {
height: var(--touch-size);
width: var(--touch-size);
background: radial-gradient(
circle at
calc(
(100% - var(--thumb-size)) / 10 * var(--value) +
var(--thumb-size) / 2
)
50%,
#f0f0f0 calc(var(--thumb-size) / 2),
transparent calc(var(--thumb-size) / 2)
);
/* Just to visualize the actual size */
outline: 1px solid black;
}
input[type="range"]::-moz-range-thumb {
height: var(--touch-size);
width: var(--touch-size);
background: radial-gradient(
circle at
calc(
(100% - var(--thumb-size)) / 10 * var(--value) +
var(--thumb-size) / 2
)
50%,
#f0f0f0 calc(var(--thumb-size) / 2),
transparent calc(var(--thumb-size) / 2)
);
/* Just to visualize the actual size */
outline: 1px solid black;
}
/* Original styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.slider {
position: relative;
margin: 2em 1em;
width: 500px;
}
.slider input[type="range"] {
position: absolute;
top: 0;
left: 0;
appearance: none;
width: 100%;
background: none;
transform: translateY(-50%);
pointer-events: none;
z-index: 2;
}
input[type="range"]::-webkit-slider-thumb {
appearance: none;
pointer-events: auto;
cursor: pointer;
border-radius: 50%;
}
input[type="range"]::-moz-range-thumb {
appearance: none;
pointer-events: auto;
cursor: pointer;
border-radius: 50%;
}
.slider__background-range-box,
.slider__range_visualizer {
height: .25em;
border-radius: .25em;
}
.slider__background-range-box {
width: 100%;
position: relative;
transform: translateY(-50%);
background-color: grey;
}
.slider__range_visualizer {
position: absolute;
left: 0;
right: 0;
background-color: pink;
}<div class="slider">
<input type="range" class="slider__min-selector" min="0" max="10" step="1" value="0" style="--value: 0;">
<input type="range" class="slider__max-selector" min="0" max="10" step="1" value="10" style="--value: 10;">
<div class="slider__background-range-box">
<div class="slider__range_visualizer"></div>
</div>
</div>上一篇python 自動填充0
下一篇vue data添加