Skip to content

Slider upper thumb does not reach maximum value when using decimal tick steps #15019

@georgianastasov

Description

@georgianastasov

Description

When using the Ignite UI Angular Slider component (igx-slider) with decimal tick steps (e.g., [step]="0.1"), the upper thumb does not reach the maximum value. For instance, when setting minValue to 0, maxValue to 10, and step to 0.1, the upper thumb only reaches 9.8, leaving a gap at the upper bound. This issue is only observed when interacting with the slider directly; updating values through other inputs reflects the correct values up to the maximum.

  • igniteui-angular version: *
  • browser: all

Steps to reproduce

  1. Initialize an igx-slider component with the following settings:
    • minValue set to 0
    • maxValue set to 10
    • step set to 0.1
  2. Set the slider type to RANGE.
  3. Bind the slider to a model where the range is from 0 to 10.
  4. Attempt to slide the upper thumb of the slider up to the maximum bound.

Result

The upper thumb of the slider only reaches 9.8 instead of the maximum value of 10. When interacting with the slider, it becomes impossible to move the thumb to exactly 10.

Expected result

The upper thumb should be able to reach the maxValue of 10 without any gaps when moving the slider.

Attachments

Sample available on StackBlitz: Slider Issue Sample
1

Metadata

Metadata

Labels

🐛 bugAny issue that describes a bug✅ status: resolvedApplies to issues that have pending PRs resolving them, or PRs that have already merged.slider

Type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions