@@ -31,6 +31,8 @@ export default class SliderComponent extends Component<SliderComponentArgs> {
31
31
@tracked displayTooltip : boolean = false ;
32
32
@tracked inputRangeElement : HTMLElement | null = null ;
33
33
@tracked tooltipElement : HTMLElement | null = null ;
34
+ @tracked numberInputElement : HTMLElement | null = null ;
35
+ @tracked actualInputValue : string | null = null ;
34
36
35
37
get defaultValue ( ) : string {
36
38
return this . args . defaultValue ?? DEFAULT_VALUE ;
@@ -67,7 +69,29 @@ export default class SliderComponent extends Component<SliderComponentArgs> {
67
69
}
68
70
69
71
get activeBackgroundWidth ( ) : ReturnType < typeof htmlSafe > {
70
- const percentage = Math . round ( this . getPercentage ( this . args . value ?? '0' ) * 100 ) ;
72
+ // For background calculation, use actual input value if available, otherwise use prop value
73
+ let valueForBackground : string ;
74
+
75
+ if ( this . actualInputValue !== null ) {
76
+ // Use the actual input value (including empty string for cleared input)
77
+ valueForBackground = this . actualInputValue ;
78
+ } else {
79
+ // Fallback to prop value
80
+ valueForBackground = this . currentRangeValue ;
81
+ }
82
+
83
+ console . log (
84
+ 'activeBackgroundWidth - actualInputValue:' ,
85
+ this . actualInputValue ,
86
+ 'valueForBackground:' ,
87
+ valueForBackground ,
88
+ 'currentRangeValue:' ,
89
+ this . currentRangeValue ,
90
+ 'args.value:' ,
91
+ this . args . value
92
+ ) ;
93
+ const percentage = Math . round ( this . getPercentage ( valueForBackground ) * 100 ) ;
94
+ console . log ( 'Calculated percentage:' , percentage ) ;
71
95
return htmlSafe ( `--range-percentage: ${ percentage } %` ) ;
72
96
}
73
97
@@ -91,6 +115,7 @@ export default class SliderComponent extends Component<SliderComponentArgs> {
91
115
@action
92
116
onNumberInput ( event : InputEvent ) : void {
93
117
const value = ( event . target as HTMLInputElement ) . value ;
118
+ this . actualInputValue = value ;
94
119
this . checkUserInput ( value ) ;
95
120
}
96
121
@@ -114,22 +139,29 @@ export default class SliderComponent extends Component<SliderComponentArgs> {
114
139
this . tooltipElement = element ;
115
140
}
116
141
142
+ @action
143
+ initializeNumberInput ( element : HTMLElement ) : void {
144
+ this . numberInputElement = element ;
145
+ }
146
+
117
147
private getPercentage ( value : string ) : number {
118
148
let correction = 0 ;
119
149
const convertedValue = parseFloat ( isBlank ( value ) ? '0' : value ) ;
150
+ const min = this . args . min ?? 0 ;
151
+ const max = this . args . max ?? 100 ;
152
+
153
+ console . log ( 'getPercentage - value:' , value , 'convertedValue:' , convertedValue , 'min:' , min , 'max:' , max ) ;
120
154
121
155
if ( this . args . step ) {
122
156
correction =
123
157
convertedValue % this . args . step >= this . args . step / 2
124
158
? this . args . step - ( convertedValue % this . args . step )
125
- : - value % this . args . step ;
159
+ : - convertedValue % this . args . step ;
126
160
}
127
161
128
- return Math . min (
129
- Math . max ( convertedValue + correction - this . sliderOptions . min , 0 ) /
130
- ( this . sliderOptions . max - this . sliderOptions . min ) ,
131
- 1
132
- ) ;
162
+ const result = Math . min ( Math . max ( convertedValue + correction - min , 0 ) / ( max - min ) , 1 ) ;
163
+ console . log ( 'getPercentage - result:' , result ) ;
164
+ return result ;
133
165
}
134
166
135
167
private checkUserInput ( value : string | null ) : void {
0 commit comments