disabled/round slider & visual improvement
This commit is contained in:
perry-C
parent
ff583842d7
commit
2cf1483e91
|
|
@ -12,37 +12,16 @@
|
|||
<body>
|
||||
<div id="root">
|
||||
<script type="module" src="/src/index.tsx"></script>
|
||||
<o-slider min="0" max="10" value="2 " id="single-range-demo"></o-slider>
|
||||
<o-slider min="0" max="10" value="2" id="single-range-demo" ></o-slider>
|
||||
<o-slider min="0" max="10" value="2" round id="round-single-range-demo" ></o-slider>
|
||||
|
||||
<o-slider min="0" max="10" value="2" disabled id="disabled-single-range-demo" ></o-slider>
|
||||
<o-slider min="0" max="200" value="20" second_value="70" double_range id="double-range-demo"></o-slider>
|
||||
<o-slider min="0" max="200" value="20" second_value="70" double_range disabled id="double-range-demo"></o-slider>
|
||||
<!-- sometimes thumb drag is disabled(bug), will look into later -->
|
||||
<o-slider min="0" max="100" value="10" vertical id="vertical-demo" style="position: relative; margin-top: 200px; left:-150px; width: 400px"></o-slider>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- <div class="range-slider omi" style='--min:0; --max:100; --value:75; --text-value:"75"; --suffix:"%"'>
|
||||
<input type="range" min="0" max="100" value="75" oninput="this.parentNode.style.setProperty('--value',this.value); this.parentNode.style.setProperty('--text-value', JSON.stringify(this.value))">
|
||||
<output></output>
|
||||
<div class='range-slider__progress'></div>
|
||||
</div>
|
||||
<div class="range-slider omi" data-ticks-position='top' style='--min:-500; --max:500; --value-a:-220; --value-b:400; --suffix:"%"; --text-value-a:"-220"; --text-value-b:"400";'>
|
||||
<input type="range" min="-500" max="500" value="-220" oninput="this.parentNode.style.setProperty('--value-a',this.value); this.parentNode.style.setProperty('--text-value-a', JSON.stringify(this.value))">
|
||||
<output></output>
|
||||
<input type="range" min="-500" max="500" value="400" oninput="this.parentNode.style.setProperty('--value-b',this.value); this.parentNode.style.setProperty('--text-value-b', JSON.stringify(this.value))">
|
||||
<output></output>
|
||||
<div class='range-slider__progress'></div>
|
||||
</div> -->
|
||||
|
||||
|
||||
|
||||
<!-- Double range slider (flat design) -->
|
||||
<!-- <div class="range-slider flat" data-ticks-position='top' style='--min:-500; --max:500; --value-a:-220; --value-b:400; --suffix:"%"; --text-value-a:"-220"; --text-value-b:"400";'>
|
||||
<input type="range" min="-500" max="500" value="-220" oninput="this.parentNode.style.setProperty('--value-a',this.value); this.parentNode.style.setProperty('--text-value-a', JSON.stringify(this.value))">
|
||||
<output></output>
|
||||
<input type="range" min="-500" max="500" value="400" oninput="this.parentNode.style.setProperty('--value-b',this.value); this.parentNode.style.setProperty('--text-value-b', JSON.stringify(this.value))">
|
||||
<output></output>
|
||||
<div class='range-slider__progress'></div>
|
||||
</div> -->
|
||||
<!-- -->
|
||||
<o-slider min="0" max="100" double_range vertical value="20" second_value="70" id="vertical-double-demo" style="position: relative; margin-top:-50px; left:-50px; width: 400px"></o-slider>
|
||||
</div>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -4,9 +4,8 @@
|
|||
@import '@yaireo/ui-range/ui-range.scss';
|
||||
|
||||
// excess height to improve interactive area / accessibility
|
||||
$height: 30px;
|
||||
$thumb-height: 40px;
|
||||
$track-height: 30px;
|
||||
$thumb-height: 31.25px;
|
||||
$track-height: 12.5px;
|
||||
|
||||
// colours
|
||||
$upper-color: $o-surface;
|
||||
|
|
@ -23,25 +22,36 @@ $shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
|
|||
background-color: $thumb-color;
|
||||
top: 50%;
|
||||
margin-top: math.div($thumb-height, -2);
|
||||
|
||||
// ? for round
|
||||
// border-radius: 8px;
|
||||
|
||||
outline: 2px solid $o-surface;
|
||||
outline-offset: -12px;
|
||||
|
||||
cursor: pointer;
|
||||
outline-offset: -8px;
|
||||
box-shadow: $shadow;
|
||||
pointer-events: auto;
|
||||
|
||||
z-index: 2;
|
||||
|
||||
transition: outline-offset 150ms;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
outline-offset: -14px;
|
||||
outline-offset: -10px;
|
||||
}
|
||||
}
|
||||
|
||||
// transform: rotate(180deg);
|
||||
@mixin thumb-disabled {
|
||||
@include thumb;
|
||||
pointer-events: none;
|
||||
cursor: none;
|
||||
background-color: #c0c4cc;
|
||||
}
|
||||
|
||||
@mixin thumb-round {
|
||||
outline-offset: -10px;
|
||||
border-radius: 50%;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
outline-offset: -12px;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin track {
|
||||
|
|
@ -49,16 +59,10 @@ $shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
|
|||
position: relative;
|
||||
margin: 5px;
|
||||
height: $track-height;
|
||||
|
||||
background-color: $o-surface;
|
||||
box-shadow: $shadow;
|
||||
// ? for round
|
||||
// border-radius: 8px;
|
||||
|
||||
border: 2px solid $o-primary;
|
||||
transition: background-color 200ms;
|
||||
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
:host {
|
||||
|
|
@ -66,51 +70,52 @@ $shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
|
|||
display: grid;
|
||||
}
|
||||
|
||||
//===============================base-slider=========================================
|
||||
|
||||
.slider-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.slider-track {
|
||||
.slider-container .slider-track {
|
||||
@include track; // width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
outline: none;
|
||||
margin: auto;
|
||||
// border-radius: 5x;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.slider-container .o-slider {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
pointer-events: none;
|
||||
background: transparent;
|
||||
z-index: 1;
|
||||
|
||||
pointer-events: none;
|
||||
|
||||
//*--------------track-----------------
|
||||
&::-webkit-slider-runnable-track {
|
||||
-webkit-appearance: none;
|
||||
height: $track-height;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&::-moz-range-track {
|
||||
-moz-appearance: none;
|
||||
height: $track-height;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&::-ms-track {
|
||||
appearance: none;
|
||||
height: $track-height;
|
||||
overflow: hidden;
|
||||
}
|
||||
//*--------------thumb-----------------
|
||||
&::-webkit-slider-thumb {
|
||||
|
|
@ -126,6 +131,51 @@ $shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
|
|||
appearance: none;
|
||||
}
|
||||
}
|
||||
|
||||
//===============================round-slider=========================================
|
||||
|
||||
.is-round .slider-track {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.is-round .o-slider {
|
||||
&::-webkit-slider-thumb {
|
||||
@include thumb-round;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
@include thumb-round;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
&::-ms-thumb {
|
||||
@include thumb-round;
|
||||
appearance: none;
|
||||
}
|
||||
}
|
||||
|
||||
//===============================disabled-slider=========================================
|
||||
|
||||
.is-disabled .slider-track {
|
||||
border-color: #c0c4cc;
|
||||
}
|
||||
|
||||
.is-disabled .o-slider {
|
||||
&::-webkit-slider-thumb {
|
||||
@include thumb-disabled;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
@include thumb-disabled;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
&::-ms-thumb {
|
||||
@include thumb-disabled;
|
||||
appearance: none;
|
||||
}
|
||||
}
|
||||
|
||||
.is-vertical {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,13 +10,10 @@ interface Props {
|
|||
second_value?: number
|
||||
double_range?: boolean
|
||||
vertical?: boolean
|
||||
round: boolean
|
||||
disabled?: boolean
|
||||
}
|
||||
|
||||
// window.onload = function () {
|
||||
// slideOne()
|
||||
// slideTwo()
|
||||
// }
|
||||
|
||||
@tag('o-slider')
|
||||
export default class OSlider extends WeElement<Props> {
|
||||
static css = css.default
|
||||
|
|
@ -25,10 +22,12 @@ export default class OSlider extends WeElement<Props> {
|
|||
min: 0,
|
||||
max: 100,
|
||||
step: 1,
|
||||
value: 20,
|
||||
//default single range slider
|
||||
value: 0,
|
||||
//default a single square range slider
|
||||
double_range: false,
|
||||
vertical: false
|
||||
vertical: false,
|
||||
round: false,
|
||||
disabled: false
|
||||
}
|
||||
|
||||
static propTypes = {
|
||||
|
|
@ -38,7 +37,9 @@ export default class OSlider extends WeElement<Props> {
|
|||
value: Number,
|
||||
second_value: Number,
|
||||
double_range: Boolean,
|
||||
vertical: Boolean
|
||||
vertical: Boolean,
|
||||
round: Boolean,
|
||||
disabled: Boolean
|
||||
}
|
||||
|
||||
__$value: number
|
||||
|
|
@ -50,6 +51,7 @@ export default class OSlider extends WeElement<Props> {
|
|||
sliderTwo
|
||||
|
||||
sliderTrack
|
||||
|
||||
sliderMax = this.props.max
|
||||
|
||||
handleSliderOne = () => {
|
||||
|
|
@ -58,22 +60,16 @@ export default class OSlider extends WeElement<Props> {
|
|||
this.__$value = first_value
|
||||
}
|
||||
|
||||
console.log(this.__$value, this.__$second_value)
|
||||
|
||||
// this.displayValOne.textContent = this.sliderOne.value
|
||||
this.fillColor()
|
||||
this.update()
|
||||
}
|
||||
|
||||
handleSliderTwo = () => {
|
||||
console.log(this.__$value, this.__$second_value)
|
||||
|
||||
const second_value = parseInt(this.rootNode.children[1].value)
|
||||
|
||||
if (second_value >= this.__$value) {
|
||||
this.__$second_value = second_value
|
||||
}
|
||||
// this.displayValTwo.textContent = this.sliderTwo.value
|
||||
this.fillColor()
|
||||
this.update()
|
||||
}
|
||||
|
|
@ -81,9 +77,15 @@ export default class OSlider extends WeElement<Props> {
|
|||
fillColor = () => {
|
||||
let percent1 = (this.__$value / this.props.max) * 100
|
||||
let percent2 = (this.__$second_value / this.props.max) * 100
|
||||
let lowerColor = '#07c160'
|
||||
let upperColor = '#ffffff'
|
||||
if (this.props.disabled) {
|
||||
lowerColor = '#c0c4cc'
|
||||
}
|
||||
|
||||
this.props.double_range
|
||||
? (this.sliderTrack.style.background = `linear-gradient(to right, #ffffff ${percent1}% , #07c160 ${percent1}% , #07c160 ${percent2}%, #ffffff ${percent2}%)`)
|
||||
: (this.sliderTrack.style.background = `linear-gradient(to right, #07c160 ${percent1}% , #07c160 ${percent1}% , #07c160 ${percent2}%, #ffffff ${percent2}%)`)
|
||||
? (this.sliderTrack.style.background = `linear-gradient(to right, ${upperColor} ${percent1}% , ${lowerColor} ${percent1}% , ${lowerColor} ${percent2}%, ${upperColor} ${percent2}%)`)
|
||||
: (this.sliderTrack.style.background = `linear-gradient(to right, ${lowerColor} ${percent1}% , ${lowerColor} ${percent1}% , ${lowerColor} ${percent2}%, ${upperColor} ${percent2}%)`)
|
||||
}
|
||||
|
||||
install() {
|
||||
|
|
@ -98,15 +100,17 @@ export default class OSlider extends WeElement<Props> {
|
|||
this.fillColor()
|
||||
this.update()
|
||||
}
|
||||
updated() {}
|
||||
|
||||
// updated() {
|
||||
// console.log(this.__$value, this.__$second_value)
|
||||
// }
|
||||
|
||||
render(props) {
|
||||
console.log(props)
|
||||
|
||||
const cls = extractClass(props, 'slider-container', {
|
||||
'is-vertical': props.vertical
|
||||
'is-vertical': props.vertical,
|
||||
'is-round': props.round,
|
||||
'is-disabled': props.disabled
|
||||
})
|
||||
console.log(cls)
|
||||
|
||||
return (
|
||||
<div
|
||||
|
|
@ -147,8 +151,6 @@ export default class OSlider extends WeElement<Props> {
|
|||
this.sliderTrack = e
|
||||
}}
|
||||
></div>
|
||||
|
||||
{/* <button oninput={console.log(this.sliderContainer.style)}></button> */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue