issues
search
epicmaxco
/
vuestic-ui
Vuestic UI is an open-source Vue 3 component library designed for rapid development, easy maintenance, and high accessibility. Maintained by Epicmax (@epicmaxco).
https://vuestic.dev
MIT License
3.52k
stars
340
forks
source link
fix(VaSlider): prevent slider for overflowing from track
#4293
Closed
ahmadJT
closed
5 months ago
ahmadJT
commented
6 months ago
Description
[x] prevent slider for overflowing from track
Fixes
4291
Markup:
```vue // Your code const processedStyles = computed(() => { if (Array.isArray(val.value)) { const val0 = ((val.value[0] - minComputed.value) / (maxComputed.value - minComputed.value)) * 100 const val1 = ((val.value[1] - minComputed.value) / (maxComputed.value - minComputed.value)) * 100 return { [pinPositionStyle.value]: `${val0}%`, [trackSizeStyle.value]: `${val1 - val0}%`, backgroundColor: getColor(props.color), visibility: props.showTrack ? 'visible' : 'hidden', } as CSSProperties } else { const val0 = ((val.value - minComputed.value) / (maxComputed.value - minComputed.value)) * 100 return { [trackSizeStyle.value]: `${val0 > 100 ? 100 : val0}%`, backgroundColor: getColor(props.color), visibility: props.showTrack ? 'visible' : 'hidden', } as CSSProperties } }) const dottedStyles = computed(() => { if (Array.isArray(val.value)) { const val0 = ((val.value[0] - minComputed.value) / (maxComputed.value - minComputed.value)) * 100 const val1 = ((val.value[1] - minComputed.value) / (maxComputed.value - minComputed.value)) * 100 return [ { [pinPositionStyle.value]: `${val0}%`, backgroundColor: isActiveDot(0) ? getColor(props.color) : '#ffffff', borderColor: getColor(props.color), }, { [pinPositionStyle.value]: `${val1}%`, backgroundColor: isActiveDot(1) ? getColor(props.color) : '#ffffff', borderColor: getColor(props.color), }, ] as CSSProperties[] } else { const val0 = ((val.value - minComputed.value) / (maxComputed.value - minComputed.value)) * 100 return { [pinPositionStyle.value]: `${val0 > 100 ? 100 : val0}%`, backgroundColor: isActiveDot(0) ? getColor(props.color) : '#ffffff', borderColor: getColor(props.color), } as CSSProperties } }) ```
Types of changes
[x] Bug fix (non-breaking change which fixes an issue)
[ ] New feature (non-breaking change which adds functionality)
[ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
[ ] Improvement/refactoring (non-breaking change that doesn't add any feature but make things better)
Description
Fixes
4291
Markup:
Types of changes