double ranged slider added
This commit is contained in:
perry-C
parent
38a9011f10
commit
ff583842d7
|
|
@ -5,18 +5,16 @@
|
|||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite App</title>
|
||||
<title>OMI Slider Demo</title>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="root">
|
||||
<script type="module" src="/src/index.tsx"></script>
|
||||
<o-slider min="0" max="100" value="50 " id="single-range-demo"></o-slider>
|
||||
|
||||
<o-slider min="0" max="100" value="20" double_range id="double-range-demo"></o-slider>
|
||||
<!-- <o-slider min="0" max="100" value="10" id="double-range-demo"></o-slider> -->
|
||||
<!-- <o-slider min="0" max="100" value="10" vertical id="vertical-demo"></o-slider> -->
|
||||
<o-slider min="0" max="10" value="2 " id="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="100" value="10" vertical id="vertical-demo" style="position: relative; margin-top: 200px; left:-150px; width: 400px"></o-slider>
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -5,20 +5,15 @@
|
|||
|
||||
// excess height to improve interactive area / accessibility
|
||||
$height: 30px;
|
||||
$thumb-height: 16px;
|
||||
$track-height: 16px;
|
||||
$thumb-height: 40px;
|
||||
$track-height: 30px;
|
||||
|
||||
// colours
|
||||
$upper-color: $o-surface;
|
||||
$lower-color: $o-primary;
|
||||
$thumb-color: $o-primary-fade-little;
|
||||
$thumb-color: $o-primary;
|
||||
$track-color: $o-primary-active;
|
||||
|
||||
$upper-background: linear-gradient(to bottom, $upper-color, $upper-color) 100%
|
||||
50% / 100% $track-height no-repeat transparent;
|
||||
$lower-background: linear-gradient(to bottom, $lower-color, $lower-color) 100%
|
||||
50% / 100% $track-height no-repeat transparent;
|
||||
|
||||
$shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
|
||||
|
||||
@mixin thumb {
|
||||
|
|
@ -26,20 +21,27 @@ $shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
|
|||
height: $thumb-height;
|
||||
width: $thumb-height;
|
||||
background-color: $thumb-color;
|
||||
// border-radius: 100%;
|
||||
top: 50%;
|
||||
margin-top: math.div($thumb-height, -2);
|
||||
// box-shadow: webkit-slider-thumb-shadow();
|
||||
|
||||
// ? for round
|
||||
// border-radius: 8px;
|
||||
|
||||
outline: 2px solid $o-surface;
|
||||
outline-offset: -4px;
|
||||
outline-offset: -12px;
|
||||
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
z-index: 2;
|
||||
|
||||
transition: outline-offset 150ms;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
outline-offset: -14px;
|
||||
}
|
||||
|
||||
// transform: rotate(180deg);
|
||||
}
|
||||
|
||||
@mixin track {
|
||||
|
|
@ -47,28 +49,18 @@ $shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
|
|||
position: relative;
|
||||
margin: 5px;
|
||||
height: $track-height;
|
||||
background-color: $track-color;
|
||||
|
||||
background-color: $o-surface;
|
||||
box-shadow: $shadow;
|
||||
// ? for round
|
||||
// border-radius: 8px;
|
||||
|
||||
border: 2px solid $o-primary;
|
||||
transition: background-color 150ms;
|
||||
transition: background-color 200ms;
|
||||
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
// Webkit cannot style progress so we fake it with a long shadow
|
||||
// on the thumb element
|
||||
// @function webkit-slider-thumb-shadow($i: 1) {
|
||||
// $val: #{$i}px 0 0 -#{math.div($thumb-height - $track-height, 2)} #{$upper-color};
|
||||
// @if $i == 1 {
|
||||
// @for $k from 2 through 1000 {
|
||||
// $val: #{$val}, webkit-slider-thumb-shadow($k);
|
||||
// }
|
||||
// }
|
||||
// @return $val;
|
||||
// }
|
||||
|
||||
:host {
|
||||
display: -ms-grid;
|
||||
display: grid;
|
||||
|
|
@ -78,22 +70,19 @@ $shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
|
|||
position: relative;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
border: 1px solid #000000;
|
||||
}
|
||||
|
||||
.slider-track {
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
background-color: grey;
|
||||
@include track; // width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
outline: none;
|
||||
margin: auto;
|
||||
border-radius: 5x;
|
||||
// border-radius: 5x;
|
||||
}
|
||||
|
||||
.o-slider {
|
||||
.slider-container .o-slider {
|
||||
width: 100%;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
|
|
@ -101,24 +90,27 @@ $shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
|
|||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
// height: $height;
|
||||
pointer-events: none;
|
||||
background: transparent;
|
||||
|
||||
//*--------------track-----------------
|
||||
&::-webkit-slider-runnable-track {
|
||||
@include track;
|
||||
-webkit-appearance: none;
|
||||
height: $track-height;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&::-moz-range-track {
|
||||
@include track;
|
||||
-moz-appearance: none;
|
||||
height: $track-height;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&::-ms-track {
|
||||
@include track;
|
||||
appearance: none;
|
||||
height: $track-height;
|
||||
overflow: hidden;
|
||||
}
|
||||
//*--------------thumb-----------------
|
||||
&::-webkit-slider-thumb {
|
||||
|
|
@ -134,7 +126,6 @@ $shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
|
|||
appearance: none;
|
||||
}
|
||||
}
|
||||
|
||||
.is-vertical {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
import { WeElement, h, tag, extractClass } from 'omi'
|
||||
import Script from './script'
|
||||
|
||||
import * as css from './index.scss'
|
||||
|
||||
|
|
@ -8,18 +7,20 @@ interface Props {
|
|||
max?: number
|
||||
step?: number
|
||||
value?: number
|
||||
second_value?: number
|
||||
double_range?: boolean
|
||||
vertical?: boolean
|
||||
}
|
||||
|
||||
// window.onload = function () {
|
||||
// slideOne()
|
||||
// slideTwo()
|
||||
// }
|
||||
|
||||
@tag('o-slider')
|
||||
export default class OSlider extends WeElement<Props> {
|
||||
static css = css.default
|
||||
|
||||
__$value: number
|
||||
|
||||
__$valueSecond: number
|
||||
|
||||
static defaultProps = {
|
||||
min: 0,
|
||||
max: 100,
|
||||
|
|
@ -35,56 +36,117 @@ export default class OSlider extends WeElement<Props> {
|
|||
max: Number,
|
||||
step: Number,
|
||||
value: Number,
|
||||
second_value: Number,
|
||||
double_range: Boolean,
|
||||
vertical: Boolean
|
||||
}
|
||||
|
||||
handleInput = (evt) => {
|
||||
const sliderList =
|
||||
this.shadowRoot.getElementById('slider-container').children
|
||||
this.__$value = sliderList[0].value
|
||||
__$value: number
|
||||
|
||||
this.props.double_range && (this.__$valueSecond = sliderList[1].value)
|
||||
console.log(this.__$value, this.__$valueSecond)
|
||||
__$second_value: number
|
||||
|
||||
rootNode
|
||||
sliderOne
|
||||
sliderTwo
|
||||
|
||||
sliderTrack
|
||||
sliderMax = this.props.max
|
||||
|
||||
handleSliderOne = () => {
|
||||
const first_value = parseInt(this.rootNode.children[0].value)
|
||||
if (this.__$second_value === null || first_value <= this.__$second_value) {
|
||||
this.__$value = first_value
|
||||
}
|
||||
|
||||
console.log(this.__$value, this.__$second_value)
|
||||
|
||||
// this.displayValOne.textContent = this.sliderOne.value
|
||||
this.fillColor()
|
||||
this.update()
|
||||
}
|
||||
|
||||
install() {
|
||||
this.__$value = this.props.value as any
|
||||
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()
|
||||
}
|
||||
|
||||
fillColor = () => {
|
||||
let percent1 = (this.__$value / this.props.max) * 100
|
||||
let percent2 = (this.__$second_value / this.props.max) * 100
|
||||
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}%)`)
|
||||
}
|
||||
|
||||
install() {
|
||||
this.props.value
|
||||
? (this.__$value = this.props.value as any)
|
||||
: (this.__$value = OSlider.defaultProps.value)
|
||||
this.props.second_value
|
||||
this.__$second_value = this.props.second_value as any
|
||||
}
|
||||
|
||||
installed() {
|
||||
this.fillColor()
|
||||
this.update()
|
||||
}
|
||||
updated() {}
|
||||
|
||||
render(props) {
|
||||
console.log(props)
|
||||
const cls = extractClass(props, 'o-slider', {
|
||||
|
||||
const cls = extractClass(props, 'slider-container', {
|
||||
'is-vertical': props.vertical
|
||||
})
|
||||
console.log(cls)
|
||||
|
||||
return (
|
||||
<div class="slider-container" id="slider-container">
|
||||
<div
|
||||
{...cls}
|
||||
ref={(e) => {
|
||||
this.rootNode = e
|
||||
}}
|
||||
>
|
||||
<input
|
||||
{...cls}
|
||||
class="o-slider"
|
||||
type="range"
|
||||
min={props.min}
|
||||
max={props.max}
|
||||
value={this.__$value}
|
||||
onInput={this.handleInput}
|
||||
id="inputA"
|
||||
onInput={this.handleSliderOne}
|
||||
id="slider-1"
|
||||
ref={(e) => {
|
||||
this.sliderOne = e
|
||||
}}
|
||||
/>
|
||||
{props.double_range && (
|
||||
<input
|
||||
{...cls}
|
||||
class="o-slider"
|
||||
type="range"
|
||||
min={props.min}
|
||||
max={props.max}
|
||||
value={this.__$valueSecond}
|
||||
onInput={this.handleInput}
|
||||
id="inputB"
|
||||
value={this.__$second_value}
|
||||
onInput={this.handleSliderTwo}
|
||||
id="slider-2"
|
||||
ref={(e) => {
|
||||
this.sliderTwo = e
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<div
|
||||
class="slider-track"
|
||||
ref={(e) => {
|
||||
this.sliderTrack = e
|
||||
}}
|
||||
></div>
|
||||
|
||||
{/* <button oninput={console.log(this.sliderContainer.style)}></button> */}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,33 +0,0 @@
|
|||
window.onload = function(){
|
||||
slideOne();
|
||||
slideTwo();
|
||||
}
|
||||
|
||||
let sliderOne = document.getElementById("slider-1");
|
||||
let sliderTwo = document.getElementById("slider-2");
|
||||
let displayValOne = document.getElementById("range1");
|
||||
let displayValTwo = document.getElementById("range2");
|
||||
let minGap = 0;
|
||||
let sliderTrack = document.querySelector(".slider-track");
|
||||
let sliderMaxValue = document.getElementById("slider-1").max;
|
||||
|
||||
function slideOne(){
|
||||
if(parseInt(sliderTwo.value) - parseInt(sliderOne.value) <= minGap){
|
||||
sliderOne.value = parseInt(sliderTwo.value) - minGap;
|
||||
}
|
||||
displayValOne.textContent = sliderOne.value;
|
||||
fillColor();
|
||||
}
|
||||
function slideTwo(){
|
||||
if(parseInt(sliderTwo.value) - parseInt(sliderOne.value) <= minGap){
|
||||
sliderTwo.value = parseInt(sliderOne.value) + minGap;
|
||||
}
|
||||
displayValTwo.textContent = sliderTwo.value;
|
||||
fillColor();
|
||||
}
|
||||
function fillColor(){
|
||||
percent1 = (sliderOne.value / sliderMaxValue) * 100;
|
||||
percent2 = (sliderTwo.value / sliderMaxValue) * 100;
|
||||
sliderTrack.style.background = `linear-gradient(to right, #dadae5 ${percent1}% , #3264fe ${percent1}% , #3264fe ${percent2}%, #dadae5 ${percent2}%)`;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue