Skip to content

Commit ef667b3

Browse files
Remove Number conversion
1 parent 28e6623 commit ef667b3

File tree

1 file changed

+34
-36
lines changed

1 file changed

+34
-36
lines changed

packages/uui-slider/lib/uui-slider.element.ts

Lines changed: 34 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -11,41 +11,8 @@ import { UUISliderEvent } from './UUISliderEvent';
1111
const TRACK_PADDING = 12;
1212
const STEP_MIN_WIDTH = 24;
1313

14-
const RenderTrackSteps = (steps: number[], stepWidth: number) => {
15-
return svg`
16-
${steps.map(el => {
17-
if (stepWidth >= STEP_MIN_WIDTH) {
18-
const x = Math.round(TRACK_PADDING + stepWidth * steps.indexOf(el));
19-
return svg`<circle class="track-step" cx="${x}" cy="50%" r="4.5" />`;
20-
}
21-
return svg``;
22-
})}
23-
`;
24-
};
25-
26-
const RenderStepValues = (
27-
steps: number[],
28-
stepWidth: number,
29-
hide: boolean,
30-
) => {
31-
if (hide) return nothing;
32-
33-
return html`<div id="step-values">
34-
${steps.map(
35-
el =>
36-
html` <span
37-
><span>
38-
${steps.length <= 20 && stepWidth >= STEP_MIN_WIDTH ? el : nothing}
39-
</span></span
40-
>`,
41-
)}
42-
</div>`;
43-
};
44-
4514
const GenerateStepArray = (start: number, stop: number, step: number) =>
46-
Array.from({ length: (stop - start) / step + 1 }, (_, i) =>
47-
Number((start + i * step).toFixed(CountDecimalPlaces(step))),
48-
);
15+
Array.from({ length: (stop - start) / step + 1 }, (_, i) => start + i * step);
4916

5017
const CountDecimalPlaces = (num: number) => {
5118
const decimalIndex = num.toString().indexOf('.');
@@ -300,6 +267,37 @@ export class UUISliderElement extends UUIFormControlMixin(LitElement, '') {
300267
this.dispatchEvent(new UUISliderEvent(UUISliderEvent.CHANGE));
301268
}
302269

270+
RenderTrackSteps() {
271+
return svg`
272+
${this._steps.map(el => {
273+
if (this._stepWidth >= STEP_MIN_WIDTH) {
274+
const x = Math.round(
275+
TRACK_PADDING + this._stepWidth * this._steps.indexOf(el),
276+
);
277+
return svg`<circle class="track-step" cx="${x}" cy="50%" r="4.5" />`;
278+
}
279+
return svg``;
280+
})}
281+
`;
282+
}
283+
284+
RenderStepValues() {
285+
if (this.hideStepValues) return nothing;
286+
287+
return html`<div id="step-values">
288+
${this._steps.map(
289+
el =>
290+
html` <span
291+
><span>
292+
${this._steps.length <= 20 && this._stepWidth >= STEP_MIN_WIDTH
293+
? el.toFixed(CountDecimalPlaces(this.step))
294+
: nothing}
295+
</span></span
296+
>`,
297+
)}
298+
</div>`;
299+
}
300+
303301
render() {
304302
return html`
305303
<input
@@ -317,7 +315,7 @@ export class UUISliderElement extends UUIFormControlMixin(LitElement, '') {
317315
<div id="track" aria-hidden="true">
318316
<svg height="100%" width="100%">
319317
<rect x="9" y="9" height="3" rx="2" />
320-
${RenderTrackSteps(this._steps, this._stepWidth)}
318+
${this.RenderTrackSteps()}
321319
</svg>
322320
323321
<div id="track-inner" aria-hidden="true">
@@ -328,7 +326,7 @@ export class UUISliderElement extends UUIFormControlMixin(LitElement, '') {
328326
</div>
329327
</div>
330328
</div>
331-
${RenderStepValues(this._steps, this._stepWidth, this.hideStepValues)}
329+
${this.RenderStepValues()}
332330
`;
333331
}
334332

0 commit comments

Comments
 (0)