extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2025-06-30 14:21:05 +02:00
Code Issues Packages Projects Releases Wiki Activity

improve double slider hit spot

Browse Source
This commit is contained in:
zombieFox
2021-09-12 20:18:24 +01:00
parent 318993d5cc
commit e8381981d3
2 changed files with 36 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/component/control/sliderDouble/index.js
View File

@ -58,11 +58,29 @@ export const Control_sliderDouble = function({
}
} = {}) {
this.element = {
sliderDouble: node('div|class:slider-double')
};
this.label = form.label({
forInput: left.id,
text: labelText
});
this.rightClip = () => {
let rightClipPostion = ((this.range.right.value() - this.range.left.value()) / 2) + this.range.left.value();
if (this.range.right.value() < (right.max / 2)) {
rightClipPostion = rightClipPostion + 1;
} else {
rightClipPostion = rightClipPostion - 1;
};
this.element.sliderDouble.style.setProperty('--slider-double-right-clip', rightClipPostion);
};
this.range = {
left: new Control_slider({
object: object,
@ -89,6 +107,8 @@ export const Control_sliderDouble = function({
this.range.right.update();
this.rightClip();
if (left.action) {
left.action();
};
@ -127,6 +147,8 @@ export const Control_sliderDouble = function({
this.range.right.updateRange();
this.rightClip();
if (right.action) {
right.action();
};
@ -169,10 +191,7 @@ export const Control_sliderDouble = function({
form.wrap({
children: [
this.label,
node('div|class:slider-double', [
this.range.left.range,
this.range.right.range
])
this.element.sliderDouble,
]
}),
form.wrap({
@ -190,6 +209,18 @@ export const Control_sliderDouble = function({
]
});
this.assemble = () => {
this.element.sliderDouble.appendChild(this.range.left.range);
this.element.sliderDouble.appendChild(this.range.right.range);
this.rightClip();
};
this.assemble();
return wrap;
};

10
src/component/form/input/range/index.css
View File

@ -189,15 +189,7 @@ input[type="range"]:disabled.input-range-hue-spectrum::-moz-range-track {
top: 0;
left: 0;
width: 100%;
pointer-events: none;
}
.slider-double input[type="range"]:last-child::-webkit-slider-thumb {
pointer-events: all;
}
.slider-double input[type="range"]:last-child::-moz-range-thumb {
pointer-events: all;
clip-path: polygon(calc(var(--slider-double-right-clip) * 1%) 0%, calc(100% + 2em) 0%, calc(100% + 2em) 100%, calc(var(--slider-double-right-clip) * 1%) 100%);
}
.slider-double input[type="range"]:last-child::-webkit-slider-runnable-track,