Skip to content

Commit

Permalink
fix(slider): improve value snapping and calculation logic (#986)
Browse files Browse the repository at this point in the history
  • Loading branch information
ckrook authored Jan 30, 2025
1 parent d8a87e3 commit e054c09
Showing 1 changed file with 12 additions and 9 deletions.
21 changes: 12 additions & 9 deletions packages/core/src/components/slider/slider.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -222,18 +222,21 @@ export class TdsSlider {

private updateValue(event) {
const trackWidth = this.getTrackWidth();
const numTicks = parseInt(this.ticks);
const min = parseFloat(this.min);
const max = parseFloat(this.max);

/* if snapping (supposedValueSlot > 0) is enabled, make sure we display the supposed value (instead of maybe getting a -1/+1 depending on rounding) */
if (this.useSnapping && numTicks) {
const supposedValue = this.tickValues[this.supposedValueSlot];
this.value = `${supposedValue}`;
this.calculateThumbLeftFromValue(supposedValue);
// If snapping is enabled and a valid supposedValueSlot is available,
// snap the value to the closest tick. Use the snapped value to update
// the slider's thumb position and internal value.
if (this.useSnapping && this.supposedValueSlot >= 0) {
const snappedValue = this.tickValues[this.supposedValueSlot];
this.value = snappedValue.toString();
this.calculateThumbLeftFromValue(snappedValue);
} else {
const percentage = this.thumbLeft / trackWidth;
this.value = `${Math.trunc(
parseFloat(this.min) + percentage * (parseFloat(this.max) - parseFloat(this.min)),
)}`;
const calculatedValue = min + percentage * (max - min);

this.value = Math.round(calculatedValue).toString();
}
this.updateTrack();

Expand Down

0 comments on commit e054c09

Please sign in to comment.