Skip to content

Commit 7a5a610

Browse files
committed
fix: added fix for oss slider
1 parent 462e9a9 commit 7a5a610

File tree

5 files changed

+56
-14
lines changed

5 files changed

+56
-14
lines changed

addon/components/o-s-s/input-container.hbs

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,13 @@
1515
{{yield to="input"}}
1616
</div>
1717
{{else}}
18-
<Input
19-
@value={{@value}}
20-
@type={{this.type}}
18+
<input
19+
value={{@value}}
20+
type={{this.type}}
2121
placeholder={{@placeholder}}
2222
disabled={{@disabled}}
2323
class="upf-input"
24+
{{on "input" this.onInput}}
2425
{{on "keyup" (fn this._onChange @value)}}
2526
{{on "paste" this.onPaste}}
2627
/>

addon/components/o-s-s/input-container.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,12 @@ export default class OSSInputContainer extends Component<OSSInputContainerArgs>
4343
return this.args.type ?? 'text';
4444
}
4545

46+
@action
47+
onInput(event: Event): void {
48+
const input = event.target as HTMLInputElement;
49+
this.args.onChange?.(input.value);
50+
}
51+
4652
@action
4753
_onChange(value: string): void {
4854
if (this.args.onChange) {

addon/components/o-s-s/slider.hbs

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@
4040
@placeholder={{this.currentRangeValue}}
4141
@disabled={{@disabled}}
4242
{{on "input" this.onNumberInput}}
43+
{{did-insert this.initializeNumberInput}}
4344
/>
4445
{{else}}
4546
<Input
@@ -52,8 +53,9 @@
5253
disabled={{@disabled}}
5354
class="upf-input"
5455
{{on "input" this.onNumberInput}}
56+
{{did-insert this.initializeNumberInput}}
5557
/>
5658
{{/if}}
5759
</div>
5860
{{/if}}
59-
</div>
61+
</div>

addon/components/o-s-s/slider.ts

Lines changed: 39 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,8 @@ export default class SliderComponent extends Component<SliderComponentArgs> {
3131
@tracked displayTooltip: boolean = false;
3232
@tracked inputRangeElement: HTMLElement | null = null;
3333
@tracked tooltipElement: HTMLElement | null = null;
34+
@tracked numberInputElement: HTMLElement | null = null;
35+
@tracked actualInputValue: string | null = null;
3436

3537
get defaultValue(): string {
3638
return this.args.defaultValue ?? DEFAULT_VALUE;
@@ -67,7 +69,29 @@ export default class SliderComponent extends Component<SliderComponentArgs> {
6769
}
6870

6971
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);
7195
return htmlSafe(`--range-percentage: ${percentage}%`);
7296
}
7397

@@ -91,6 +115,7 @@ export default class SliderComponent extends Component<SliderComponentArgs> {
91115
@action
92116
onNumberInput(event: InputEvent): void {
93117
const value = (event.target as HTMLInputElement).value;
118+
this.actualInputValue = value;
94119
this.checkUserInput(value);
95120
}
96121

@@ -114,22 +139,29 @@ export default class SliderComponent extends Component<SliderComponentArgs> {
114139
this.tooltipElement = element;
115140
}
116141

142+
@action
143+
initializeNumberInput(element: HTMLElement): void {
144+
this.numberInputElement = element;
145+
}
146+
117147
private getPercentage(value: string): number {
118148
let correction = 0;
119149
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);
120154

121155
if (this.args.step) {
122156
correction =
123157
convertedValue % this.args.step >= this.args.step / 2
124158
? this.args.step - (convertedValue % this.args.step)
125-
: -value % this.args.step;
159+
: -convertedValue % this.args.step;
126160
}
127161

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;
133165
}
134166

135167
private checkUserInput(value: string | null): void {

tests/integration/components/o-s-s/slider-test.ts

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -215,13 +215,14 @@ module('Integration | Component | o-s-s/slider', function (hooks) {
215215
assert.strictEqual(element.style.getPropertyValue('--range-percentage'), '0%');
216216
});
217217

218-
test('it renders the slider with a maximum value when @min is provided', async function (assert) {
218+
test('it renders the slider with a maximum value when @max is provided', async function (assert) {
219219
this.max = 1000;
220+
this.inputOptions = { max: this.max - 1 };
220221
await render(
221-
hbs`<OSS::Slider @value={{this.value}} @displayInputValue={{true}} @min={{this.min}} @max={{this.max}} @step={{this.step}} @unit="percentage" @onChange={{this.onChange}} />`
222+
hbs`<OSS::Slider @value={{this.value}} @displayInputValue={{true}} @inputOptions={{this.inputOptions}} @min={{this.min}} @max={{this.max}} @step={{this.step}} @unit="percentage" @onChange={{this.onChange}} />`
222223
);
223224

224-
await fillIn('.oss-slider__number-input input', '1000');
225+
await fillIn('.oss-slider__number-input input', this.max);
225226
const element = this.element.querySelector('.oss-slider__range');
226227
assert.strictEqual(element.style.getPropertyValue('--range-percentage'), '100%');
227228
});

0 commit comments

Comments
 (0)