@@ -11,41 +11,8 @@ import { UUISliderEvent } from './UUISliderEvent';
1111const TRACK_PADDING = 12 ;
1212const 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-
4514const 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
5017const 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