fix(VaSlider): prevent slider for overflowing from track

[ahmadJT]

Description

• prevent slider for overflowing from track

Fixes

#4291

Markup:

// 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

• 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)

[m0ksem]

Thanks!