fix(slider): visual overhaul
This commit is contained in:
perry-C
parent
94f8e0c983
commit
e36261c0b2
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@omiu/slider",
|
||||
"version": "0.0.5",
|
||||
"version": "0.0.6",
|
||||
"description": "Slider",
|
||||
"main": "src/index.js",
|
||||
"module": "src/index.esm.js",
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -3,49 +3,48 @@
|
|||
@import '@omiu/common/theme.scss';
|
||||
|
||||
// excess height to improve interactive area / accessibility
|
||||
$thumb-height: 31.25px;
|
||||
$track-height: 12.5px;
|
||||
$thumb-height: 14px;
|
||||
$track-height: 4px;
|
||||
|
||||
// colours
|
||||
$upper-color: $o-surface;
|
||||
$lower-color: $o-primary;
|
||||
$thumb-color: $o-primary;
|
||||
|
||||
$shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
|
||||
$thumb-color: $o-surface;
|
||||
$hover-thumb-color: $o-primary-fade-lot;
|
||||
|
||||
@mixin thumb {
|
||||
position: relative;
|
||||
height: $thumb-height;
|
||||
width: $thumb-height;
|
||||
background-color: $thumb-color;
|
||||
transition: background-color 150ms;
|
||||
box-shadow: $shadow;
|
||||
top: 50%;
|
||||
margin-top: ($thumb-height / -2) - 2;
|
||||
pointer-events: auto;
|
||||
width: $thumb-height;
|
||||
height: $thumb-height;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
margin-top: ($thumb-height / -2) - 2;
|
||||
border: 2px solid $o-primary;
|
||||
background-color: $thumb-color;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
box-shadow: 0;
|
||||
transition: border-color 0.3s, box-shadow 0.6s,
|
||||
transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: $o-primary-active;
|
||||
&:active {
|
||||
box-shadow: 0 0 0 5px $hover-thumb-color;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: $o-primary-active;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin thumb-disabled {
|
||||
@include thumb;
|
||||
pointer-events: none;
|
||||
cursor: none;
|
||||
background-color: #c0c4cc;
|
||||
border-color: #c0c4cc;
|
||||
}
|
||||
|
||||
@mixin thumb-round {
|
||||
outline-offset: -10px;
|
||||
@include thumb;
|
||||
border-radius: 50%;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
outline-offset: -12px;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin track {
|
||||
|
|
@ -53,10 +52,6 @@ $shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
|
|||
position: relative;
|
||||
margin: 5px;
|
||||
height: $track-height;
|
||||
background-color: $o-surface;
|
||||
box-shadow: $shadow;
|
||||
border: 2px solid $o-primary;
|
||||
transition: background-color 200ms;
|
||||
}
|
||||
|
||||
:host {
|
||||
|
|
@ -83,16 +78,16 @@ $shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
|
|||
}
|
||||
|
||||
.slider-container .o-slider {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background: transparent;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
background: transparent;
|
||||
pointer-events: none;
|
||||
|
||||
&:focus {
|
||||
|
|
|
|||
|
|
@ -56,6 +56,9 @@ export default class OSlider extends WeElement<Props> {
|
|||
sliderTrack: HTMLElement
|
||||
sliderMax: number = this.props.max
|
||||
|
||||
lowerColor = '#059048'
|
||||
upperColor = '#d9d9d9'
|
||||
|
||||
install() {
|
||||
this.__$value1 = this.props.value
|
||||
this.props.range === 'double'
|
||||
|
|
@ -72,6 +75,14 @@ export default class OSlider extends WeElement<Props> {
|
|||
})
|
||||
}
|
||||
|
||||
installed() {
|
||||
this.fillColor('#07c160', '#f0f0f0')
|
||||
this.update()
|
||||
let host = this.shadowRoot.host as HTMLElement
|
||||
this.props.orient === 'vertical' &&
|
||||
(host.style.transform = 'rotate(-90deg)')
|
||||
}
|
||||
|
||||
_onGetValue = () => {
|
||||
return this.__$value1
|
||||
}
|
||||
|
|
@ -92,15 +103,12 @@ export default class OSlider extends WeElement<Props> {
|
|||
this.setAttribute('second_value', value)
|
||||
}
|
||||
|
||||
installed() {
|
||||
this.fillColor()
|
||||
receiveProps() {
|
||||
this.fillColor(this.lowerColor, this.upperColor)
|
||||
this.update()
|
||||
let host = this.shadowRoot.host as HTMLElement
|
||||
this.props.orient === 'vertical' &&
|
||||
(host.style.transform = 'rotate(-90deg)')
|
||||
}
|
||||
|
||||
handleSliderOne = () => {
|
||||
handleSliderOne = (evt) => {
|
||||
const first_value = parseInt(this.slider1.value)
|
||||
if (first_value <= this.__$value2 || this.props.range === 'single') {
|
||||
// if the slider 1 has not exceeded slider2 or it is a single range slider
|
||||
|
|
@ -112,22 +120,22 @@ export default class OSlider extends WeElement<Props> {
|
|||
} else {
|
||||
this.fire('input', [this.__$value1, this.__$value2])
|
||||
}
|
||||
this.fillColor()
|
||||
this.fillColor(this.lowerColor, this.upperColor)
|
||||
this.update()
|
||||
}
|
||||
|
||||
handleSliderTwo = () => {
|
||||
handleSliderTwo = (evt) => {
|
||||
const second_value = parseInt(this.slider2.value)
|
||||
//we only have one case if slider two exists
|
||||
if (second_value >= this.__$value1) {
|
||||
this.__$value2 = second_value
|
||||
}
|
||||
this.fire('input', [this.__$value1, this.__$value2])
|
||||
this.fillColor()
|
||||
this.fillColor(this.lowerColor, this.upperColor)
|
||||
this.update()
|
||||
}
|
||||
|
||||
fillColor = () => {
|
||||
fillColor = (lowerColor, upperColor) => {
|
||||
let percent1 =
|
||||
this.props.range === 'double'
|
||||
? (this.__$value1 / this.props.max) * 100
|
||||
|
|
@ -136,8 +144,7 @@ export default class OSlider extends WeElement<Props> {
|
|||
this.props.range === 'double'
|
||||
? (this.__$value2 / this.props.max) * 100
|
||||
: (this.__$value1 / this.props.max) * 100
|
||||
let lowerColor = '#07c160'
|
||||
let upperColor = '#ffffff'
|
||||
|
||||
if (this.props.disabled) {
|
||||
lowerColor = '#c0c4cc'
|
||||
}
|
||||
|
|
@ -147,6 +154,11 @@ export default class OSlider extends WeElement<Props> {
|
|||
: (this.sliderTrack.style.background = `linear-gradient(to right, ${lowerColor} ${percent1}% , ${lowerColor} ${percent1}% , ${lowerColor} ${percent2}%, ${upperColor} ${percent2}%)`)
|
||||
}
|
||||
|
||||
handleChange = () => {
|
||||
this.fillColor('#07c160', '#f0f0f0')
|
||||
console.log('after change')
|
||||
}
|
||||
|
||||
render(props) {
|
||||
const cls = extractClass(props, 'slider-container', {
|
||||
'is-vertical': props.orient === 'vertical',
|
||||
|
|
@ -176,13 +188,14 @@ export default class OSlider extends WeElement<Props> {
|
|||
>
|
||||
<input
|
||||
class="o-slider"
|
||||
id="slider-1"
|
||||
type="range"
|
||||
min={props.min}
|
||||
max={props.max}
|
||||
step={props.step}
|
||||
value={this.__$value1}
|
||||
onInput={this.handleSliderOne}
|
||||
id="slider-1"
|
||||
onMouseUp={this.handleChange}
|
||||
ref={(e) => {
|
||||
this.slider1 = e
|
||||
}}
|
||||
|
|
@ -197,6 +210,7 @@ export default class OSlider extends WeElement<Props> {
|
|||
max={props.max}
|
||||
value={this.__$value1}
|
||||
onInput={this.handleSliderOne}
|
||||
onMouseUp={this.handleChange}
|
||||
id="slider-1"
|
||||
ref={(e) => {
|
||||
this.slider1 = e
|
||||
|
|
@ -225,6 +239,7 @@ export default class OSlider extends WeElement<Props> {
|
|||
max={props.max}
|
||||
value={this.__$value2}
|
||||
onInput={this.handleSliderTwo}
|
||||
onMouseUp={this.handleChange}
|
||||
id="slider-2"
|
||||
ref={(e) => {
|
||||
this.slider2 = e
|
||||
|
|
@ -240,6 +255,7 @@ export default class OSlider extends WeElement<Props> {
|
|||
max={props.max}
|
||||
value={this.__$value2}
|
||||
onInput={this.handleSliderTwo}
|
||||
onMouseUp={this.handleChange}
|
||||
id="slider-2"
|
||||
ref={(e) => {
|
||||
this.slider2 = e
|
||||
|
|
|
|||
Loading…
Reference in New Issue