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

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