Add preset points along a slider
This commit is contained in:
Samuel Elliott
parent
e314faf157
commit
5b87a928ba
|
|
@ -1,16 +1,78 @@
|
|||
.bd-slider {
|
||||
height: 24px;
|
||||
min-height: 24px;
|
||||
min-width: 180px;
|
||||
|
||||
.bd-slider-container {
|
||||
margin-top: 8px;
|
||||
border-radius: 8px;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.bd-slider-points {
|
||||
padding: 0 5px;
|
||||
|
||||
.bd-slider-point {
|
||||
left: 0;
|
||||
margin-left: -12px;
|
||||
position: relative;
|
||||
top: -6px;
|
||||
width: 24px;
|
||||
|
||||
color: #72767d;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
margin-bottom: -26px;
|
||||
text-align: center;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
background-color: #4f545c;
|
||||
height: 24px;
|
||||
width: 2px;
|
||||
position: relative;
|
||||
display: block;
|
||||
top: 4px;
|
||||
margin-bottom: -22px;
|
||||
margin-left: 11px;
|
||||
}
|
||||
|
||||
+ .bd-slider-point {
|
||||
top: -14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bd-slider-bar {
|
||||
background-color: #4f545c;
|
||||
height: 8px;
|
||||
border-radius: 4px;
|
||||
padding: 0 5px;
|
||||
overflow: hidden;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
background-color: $colbdblue;
|
||||
height: 8px;
|
||||
width: 5px;
|
||||
display: block;
|
||||
margin-left: -5px;
|
||||
}
|
||||
|
||||
.bd-slider-bar-filled {
|
||||
background-color: $colbdblue;
|
||||
height: 8px;
|
||||
width: 100%;
|
||||
margin-top: -8px;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-slider-thumb-wrap {
|
||||
margin: -16px 0;
|
||||
padding: 0 5px;
|
||||
|
||||
.bd-slider-thumb {
|
||||
width: 10px;
|
||||
height: 24px;
|
||||
display: block;
|
||||
position: relative;
|
||||
bottom: 16px;
|
||||
pointer-events: none;
|
||||
background: #FFF;
|
||||
border: 1px solid #dcddde;
|
||||
|
|
@ -21,27 +83,14 @@
|
|||
}
|
||||
}
|
||||
|
||||
.bd-slider-bar {
|
||||
background-color: #4f545c;
|
||||
height: 8px;
|
||||
border-radius: 4px;
|
||||
|
||||
.bd-slider-bar-filled {
|
||||
background-color: $colbdblue;
|
||||
height: 8px;
|
||||
border-radius: 4px 0 0 4px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
border-radius: 4px;
|
||||
display: block;
|
||||
height: 8px;
|
||||
height: 24px;
|
||||
background-color: transparent;
|
||||
outline: none;
|
||||
width: 180px;
|
||||
margin: -8px 0 0;
|
||||
width: 100%;
|
||||
margin: -24px 0 0;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
|
||||
|
|
@ -53,11 +102,10 @@
|
|||
border-radius: 3px;
|
||||
cursor: ew-resize;
|
||||
height: 24px;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
width: 10px;
|
||||
background: transparent;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,11 +14,16 @@
|
|||
<h3>{{ setting.text }}</h3>
|
||||
<div class="bd-slider">
|
||||
<div class="bd-slider-container">
|
||||
<div class="bd-slider-points">
|
||||
<div class="bd-slider-point" v-for="(label, point) in setting.points" :style="{left: `${getPointPosition(point) * 100}%`}">{{ label }}</div>
|
||||
</div>
|
||||
<div class="bd-slider-bar">
|
||||
<div class="bd-slider-bar-filled" :style="{width: `${(((this.setting.value - (this.setting.min || 0)) / ((this.setting.max || 100) - (this.setting.min || 0))) * 100)}%`}"></div>
|
||||
<div class="bd-slider-bar-filled" :style="{width: `${getPointPosition() * 100}%`}"></div>
|
||||
</div>
|
||||
<div class="bd-slider-thumb-wrap">
|
||||
<div class="bd-slider-thumb" v-tooltip="{content: (setting.value || '0') + setting.unit, show: toolTip, trigger: 'manual'}" :style="{left: `${getPointPosition() * 100}%`}"></div>
|
||||
</div>
|
||||
<input type="range" :value="setting.value" :min="setting.min || 0" :max="setting.max || 100" :step="setting.step || 1" @keyup.stop @input="input" />
|
||||
<span class="bd-slider-thumb" v-tooltip="{content: setting.value || '0', show: toolTip, trigger: 'manual'}" :style="{left: `${(((this.setting.value - (this.setting.min || 0)) / ((this.setting.max || 100) - (this.setting.min || 0))) * 100)}%`}"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -40,6 +45,9 @@
|
|||
if (Number.isNaN(number)) return;
|
||||
this.change(this.setting.id, number);
|
||||
},
|
||||
getPointPosition(value) {
|
||||
return ((value || this.setting.value) - (this.setting.min || 0)) / ((this.setting.max || 100) - (this.setting.min || 0));
|
||||
},
|
||||
showTooltip() {
|
||||
this.toolTip = true;
|
||||
},
|
||||
|
|
|
|||
|
|
@ -75,9 +75,25 @@
|
|||
"min": 0,
|
||||
"max": 100,
|
||||
"step": 1,
|
||||
"unit": "%",
|
||||
"text": "Slider Test Setting",
|
||||
"hint": "Slider Test Setting Hint"
|
||||
},
|
||||
{
|
||||
"id": "test-slider-2",
|
||||
"type": "slider",
|
||||
"value": 0,
|
||||
"min": 0,
|
||||
"max": 100,
|
||||
"step": 1,
|
||||
"unit": "%",
|
||||
"points": {
|
||||
"0": "0%",
|
||||
"100": "100%"
|
||||
},
|
||||
"text": "Slider Test Setting",
|
||||
"hint": "Slider with two points."
|
||||
},
|
||||
{
|
||||
"id": "default-3",
|
||||
"type": "file",
|
||||
|
|
|
|||
Loading…
Reference in New Issue