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..8cf272186 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,11 @@ 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;
+};
+
// 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 +629,16 @@ export class UUIRangeSliderElement extends UUIFormControlMixin(LitElement, '') {
private _renderThumbValues() {
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..9c4c52ae7 100644
--- a/packages/uui-slider/lib/uui-slider.element.ts
+++ b/packages/uui-slider/lib/uui-slider.element.ts
@@ -11,42 +11,14 @@ import { UUISliderEvent } from './UUISliderEvent';
const TRACK_PADDING = 12;
const STEP_MIN_WIDTH = 24;
-const RenderTrackSteps = (steps: number[], stepWidth: number) => {
- return svg`
- ${steps.map(el => {
- if (stepWidth >= STEP_MIN_WIDTH) {
- const x = Math.round(TRACK_PADDING + stepWidth * steps.indexOf(el));
- return svg`
`;
- }
- return svg``;
- })}
-`;
-};
-
-const RenderStepValues = (
- steps: number[],
- stepWidth: number,
- hide: boolean,
-) => {
- if (hide) return nothing;
-
- return html`
- ${steps.map(
- el =>
- html`
- ${steps.length <= 20 && stepWidth >= STEP_MIN_WIDTH
- ? el.toFixed(0)
- : nothing}
- `,
- )}
-
`;
-};
-
const GenerateStepArray = (start: number, stop: number, step: number) =>
Array.from({ length: (stop - start) / step + 1 }, (_, i) => start + i * step);
+const CountDecimalPlaces = (num: number) => {
+ const decimalIndex = num.toString().indexOf('.');
+ return decimalIndex >= 0 ? num.toString().length - decimalIndex - 1 : 0;
+};
+
/**
* @element uui-slider
* @description - Native `
` wrapper.
@@ -295,6 +267,37 @@ export class UUISliderElement extends UUIFormControlMixin(LitElement, '') {
this.dispatchEvent(new UUISliderEvent(UUISliderEvent.CHANGE));
}
+ renderTrackSteps() {
+ return svg`
+ ${this._steps.map(el => {
+ if (this._stepWidth >= STEP_MIN_WIDTH) {
+ const x = Math.round(
+ TRACK_PADDING + this._stepWidth * this._steps.indexOf(el),
+ );
+ return svg`
`;
+ }
+ return svg``;
+ })}
+`;
+ }
+
+ renderStepValues() {
+ if (this.hideStepValues) return nothing;
+
+ return html`
+ ${this._steps.map(
+ el =>
+ html`
+ ${this._steps.length <= 20 && this._stepWidth >= STEP_MIN_WIDTH
+ ? el.toFixed(CountDecimalPlaces(this.step))
+ : nothing}
+ `,
+ )}
+
`;
+ }
+
render() {
return html`
@@ -323,7 +326,7 @@ export class UUISliderElement extends UUIFormControlMixin(LitElement, '') {
- ${RenderStepValues(this._steps, this._stepWidth, this.hideStepValues)}
+ ${this.renderStepValues()}
`;
}
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,
+ },
+};