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` - ${RenderTrackSteps(this._steps, this._stepWidth)} + ${this.RenderTrackSteps()} - ${RenderStepValues(this._steps, this._stepWidth, this.hideStepValues)} + ${this.RenderStepValues()} `; }