diff --git a/packages/uui-slider/lib/uui-slider.element.ts b/packages/uui-slider/lib/uui-slider.element.ts
index 81ad5d919..adc1e24d0 100644
--- a/packages/uui-slider/lib/uui-slider.element.ts
+++ b/packages/uui-slider/lib/uui-slider.element.ts
@@ -11,41 +11,8 @@ 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 : nothing}
- `,
- )}
-
`;
-};
-
const GenerateStepArray = (start: number, stop: number, step: number) =>
- Array.from({ length: (stop - start) / step + 1 }, (_, i) =>
- Number((start + i * step).toFixed(CountDecimalPlaces(step))),
- );
+ Array.from({ length: (stop - start) / step + 1 }, (_, i) => start + i * step);
const CountDecimalPlaces = (num: number) => {
const decimalIndex = num.toString().indexOf('.');
@@ -300,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`
@@ -328,7 +326,7 @@ export class UUISliderElement extends UUIFormControlMixin(LitElement, '') {
- ${RenderStepValues(this._steps, this._stepWidth, this.hideStepValues)}
+ ${this.RenderStepValues()}
`;
}