diff --git a/packages/uui-range-slider/lib/uui-range-slider.element.ts b/packages/uui-range-slider/lib/uui-range-slider.element.ts
index 19702e2d0..d8b0680a9 100644
--- a/packages/uui-range-slider/lib/uui-range-slider.element.ts
+++ b/packages/uui-range-slider/lib/uui-range-slider.element.ts
@@ -16,6 +16,14 @@ const TRACK_HEIGHT = 3;
const TRACK_PADDING = 12;
const STEP_MIN_WIDTH = 24;
+const CountDecimalPlaces = (num: number) => {
+ const decimalIndex = num.toString().indexOf('.');
+ return decimalIndex >= 0 ? num.toString().length - decimalIndex - 1 : 0;
+};
+
+const RoundToDecimalPlaces = (target: number, decimalPlaces: number) =>
+ Number(target.toFixed(decimalPlaces));
+
// TODO: ability to focus on the range, to enable keyboard interaction to move the range.
// TODO: Ability to click outside a range, to move the range if the maxGap has been reached.
// TODO: .
@@ -624,8 +632,22 @@ export class UUIRangeSliderElement extends UUIFormControlMixin(LitElement, '') {
private _renderThumbValues() {
return html`
- ${this._lowInputValue}
- ${this._highInputValue}
+ ${RoundToDecimalPlaces(
+ this._lowInputValue,
+ CountDecimalPlaces(this._step),
+ )}
+ ${RoundToDecimalPlaces(
+ this._highInputValue,
+ CountDecimalPlaces(this._step),
+ )}
`;
}
@@ -656,7 +678,12 @@ export class UUIRangeSliderElement extends UUIFormControlMixin(LitElement, '') {
let index = 0;
const stepValues = new Array(stepAmount + 1)
.fill(this._step)
- .map(step => this._min + step * index++);
+ .map(step =>
+ RoundToDecimalPlaces(
+ this._min + step * index++,
+ CountDecimalPlaces(this._step),
+ ),
+ );
return html`
${stepValues.map(value => html`${value}`)}
diff --git a/packages/uui-slider/lib/uui-slider.element.ts b/packages/uui-slider/lib/uui-slider.element.ts
index dd1f750a9..81ad5d919 100644
--- a/packages/uui-slider/lib/uui-slider.element.ts
+++ b/packages/uui-slider/lib/uui-slider.element.ts
@@ -35,9 +35,7 @@ const RenderStepValues = (
el =>
html`
- ${steps.length <= 20 && stepWidth >= STEP_MIN_WIDTH
- ? el.toFixed(0)
- : nothing}
+ ${steps.length <= 20 && stepWidth >= STEP_MIN_WIDTH ? el : nothing}
`,
)}
@@ -45,7 +43,14 @@ const RenderStepValues = (
};
const GenerateStepArray = (start: number, stop: number, step: number) =>
- Array.from({ length: (stop - start) / step + 1 }, (_, i) => start + i * step);
+ Array.from({ length: (stop - start) / step + 1 }, (_, i) =>
+ Number((start + i * step).toFixed(CountDecimalPlaces(step))),
+ );
+
+const CountDecimalPlaces = (num: number) => {
+ const decimalIndex = num.toString().indexOf('.');
+ return decimalIndex >= 0 ? num.toString().length - decimalIndex - 1 : 0;
+};
/**
* @element uui-slider
diff --git a/packages/uui-slider/lib/uui-slider.story.ts b/packages/uui-slider/lib/uui-slider.story.ts
index af730a803..95288bb2f 100644
--- a/packages/uui-slider/lib/uui-slider.story.ts
+++ b/packages/uui-slider/lib/uui-slider.story.ts
@@ -56,3 +56,12 @@ export const Readonly: Story = {
readonly: true,
},
};
+
+export const DecimalValue: Story = {
+ args: {
+ min: 0,
+ max: 1,
+ step: 0.1,
+ value: 0.5,
+ },
+};