diff --git a/components/slider/index.html b/components/slider/index.html
index 01ed8df4c..72e2a4608 100644
--- a/components/slider/index.html
+++ b/components/slider/index.html
@@ -12,37 +12,16 @@
-
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
+
+
diff --git a/components/slider/src/index.scss b/components/slider/src/index.scss
index dd8dce8a7..ef8e5d96f 100644
--- a/components/slider/src/index.scss
+++ b/components/slider/src/index.scss
@@ -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);
}
diff --git a/components/slider/src/index.tsx b/components/slider/src/index.tsx
index 33d7f17ae..570d4205a 100644
--- a/components/slider/src/index.tsx
+++ b/components/slider/src/index.tsx
@@ -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 {
static css = css.default
@@ -25,10 +22,12 @@ export default class OSlider extends WeElement {
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 {
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 {
sliderTwo
sliderTrack
+
sliderMax = this.props.max
handleSliderOne = () => {
@@ -58,22 +60,16 @@ export default class OSlider extends WeElement {
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 {
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 {
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 (
{
this.sliderTrack = e
}}
>
-
- {/* */}
)
}