eightequal/AstralRinth
1
0
Fork 0
forked from didirus/AstralRinth
Code Pull Requests Activity

Fix slider snap points positioning (#103)

Browse Source
This commit is contained in:
ToBinio
2023-10-17 02:49:20 +02:00
committed by GitHub
parent 36f0871f69
commit ef444f2a6f
1 changed files with 36 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
lib/components/base/Slider.vue
View File

@@ -2,14 +2,16 @@
<div class="root-container"> <div class="root-container">
<div class="slider-component"> <div class="slider-component">
<div class="slide-container"> <div class="slide-container">
<div class="snap-points"> <div class="snap-points-wrapper">
<div <div class="snap-points">
v-for="snapPoint in props.snapPoints" <div
:key="snapPoint" v-for="snapPoint in props.snapPoints"
class="snap-point" :key="snapPoint"
:class="{ green: snapPoint <= currentValue }" class="snap-point"
:style="{ left: ((snapPoint - props.min) / (props.max - props.min)) * 100 + '%' }" :class="{ green: snapPoint <= currentValue }"
></div> :style="{ left: ((snapPoint - props.min) / (props.max - props.min)) * 100 + '%' }"
></div>
</div>
</div> </div>
<input <input
ref="input" ref="input"
@@ -136,10 +138,6 @@ const onInput = (value) => {
width: 100%; width: 100%;
} }
.slide-container .slider {
width: 100%;
}
.slider-component, .slider-component,
.slide-container { .slide-container {
width: 100%; width: 100%;
@@ -154,6 +152,8 @@ const onInput = (value) => {
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
height: 0.25rem; height: 0.25rem;
width: 100%;
background: linear-gradient( background: linear-gradient(
to right, to right,
var(--color-brand), var(--color-brand),
@@ -201,25 +201,37 @@ const onInput = (value) => {
transition: 0.2s; transition: 0.2s;
} }
.slider-component .slide-container .snap-points { .slider-component .slide-container .snap-points-wrapper {
position: absolute; position: absolute;
width: calc(100% - 0.75rem); height: 50%;
left: calc(0.75rem / 2); width: 100%;
top: calc(1rem / 2);
.snap-point { .snap-points {
position: absolute; position: relative;
display: inline-block;
width: 0.25rem; vertical-align: middle;
width: calc(100% - 0.75rem);
height: 0.75rem; height: 0.75rem;
border-radius: var(--radius-sm);
background-color: var(--color-base); left: calc(0.75rem / 2);
transform: translateX(calc(-0.25rem / 2)); .snap-point {
position: absolute;
display: inline-block;
&.green { width: 0.25rem;
background-color: var(--color-brand); height: 100%;
border-radius: var(--radius-sm);
background-color: var(--color-base);
transform: translateX(calc(-0.25rem / 2));
&.green {
background-color: var(--color-brand);
}
} }
} }
} }