janishutz-legacy/batu-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

snapping enabled in slider

Browse Source
This commit is contained in:
Janis Hutz
2024-10-02 10:52:42 +02:00
parent 1e86a2c78c
commit 4bccc4bc2f
1 changed files with 19 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/stopSlider.vue
View File

@@ -19,13 +19,14 @@
const maxWidth = ref( window.innerWidth ); // TODO: Update to reflect slider width const maxWidth = ref( window.innerWidth ); // TODO: Update to reflect slider width
const sliderOffset = -11; const sliderOffset = -11;
const sliderFillPosLeft = ref( sliderOffset ); // Offset from left edge const sliderFillPosLeft = ref( sliderOffset ); // Offset from left edge
const sliderFillPosRight = ref( 0 ); // Offset from right edge const sliderFillPosRight = ref( maxWidth.value ); // Offset from right edge
const sliderStops: Ref<SliderStop[]> = ref( [] ); const sliderStops: Ref<SliderStop[]> = ref( [] );
let intervalSize = 0;
const setUp = ( stops: number ) => { const setUp = ( stops: number ) => {
maxWidth.value = document.getElementById( 'slider-' + props.id )!.clientWidth; maxWidth.value = document.getElementById( 'slider-' + props.id )!.clientWidth;
sliderStops.value = []; sliderStops.value = [];
const intervalSize = maxWidth.value / ( stops - 1 ); intervalSize = maxWidth.value / ( stops - 1 );
for ( let i = 0; i < stops; i ++ ) { for ( let i = 0; i < stops; i ++ ) {
sliderStops.value.push( { sliderStops.value.push( {
x: intervalSize * i - 10, x: intervalSize * i - 10,
@@ -55,11 +56,17 @@
} else { } else {
sliderKnobPos.value = maxWidth.value + sliderOffset; sliderKnobPos.value = maxWidth.value + sliderOffset;
} }
// Calculate progress of slider background / progress bar
sliderFillPosRight.value = maxWidth.value - Math.round( sliderKnobPos.value / intervalSize ) * intervalSize + sliderOffset;
} }
} }
const endDrag = () => { const endDrag = () => {
isDragging.value = false; isDragging.value = false;
// snapping
sliderKnobPos.value = Math.round( sliderKnobPos.value / intervalSize ) * intervalSize + sliderOffset;
} }
const props = defineProps( { const props = defineProps( {
@@ -83,7 +90,7 @@
<template> <template>
<div class="slider-container"> <div class="slider-container">
<div class="slider-knob" :style="'left: ' + sliderKnobPos + 'px;'"> <div :class="'slider-knob' + ( isDragging ? ' dragging' : '' )" :style="'left: ' + sliderKnobPos + 'px;'">
<div :class="'slider-drag-support' + ( isDragging ? ' dragging' : '' )" @mousemove="( e ) => handleDrag( e.clientX )" <div :class="'slider-drag-support' + ( isDragging ? ' dragging' : '' )" @mousemove="( e ) => handleDrag( e.clientX )"
@mouseup="() => endDrag()" @mousedown="( e ) => startDrag( e.clientX )"></div> @mouseup="() => endDrag()" @mousedown="( e ) => startDrag( e.clientX )"></div>
</div> </div>
@@ -104,13 +111,18 @@
} }
.slider-knob { .slider-knob {
background-color: var( --slider-color ); background-color: var( --hover-color );
width: 25px; width: 25px;
height: 25px; height: 25px;
border-radius: 15px; border-radius: 15px;
position: absolute; position: absolute;
z-index: 5; z-index: 5;
top: -7px; top: -7px;
transition: left 0.5s;
}
.slider-knob.dragging {
transition: none;
} }
.slider-drag-support { .slider-drag-support {
@@ -142,8 +154,10 @@
} }
.slider-fill { .slider-fill {
height: 5px; height: 10px;
position: absolute; position: absolute;
background-color: var( --slider-color );
transition: width 0.5s;
} }
.slider-stop { .slider-stop {