https://i.stack.imgur.com/NgOKs.jpg# I am currently working on vertical sliders that require dragging up and down individually. However, when I pull on the first slider, all sliders move together. The resetAllSliders button should also work independently, and the applyAllSliders button should apply changes.
HTML FILE
<div class="slider-container">
<div *ngFor="let slider of sliders; let i = index" class="slider">
<input type="range" [(ngModel)]="slider.value" (input)="onSliderChange(slider, i)" />
<button (click)="resetSlider(slider)">Reset</button>
</div>
</div>
<div class="button-container">
<button (click)="resetAllSliders()">Reset All</button>
<button (click)="applyAllSliders()">Apply All</button>
</div>
TS File
// src/app/slider-app/slider-app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-slider-app',
templateUrl: './slider-app.component.html',
styleUrls: ['./slider-app.component.css']
})
export class SliderAppComponent {
sliders: { value: number }[] = Array(3).fill({ value: 10 });
onSliderChange(slider: { value: number }, index: number) {
// Handle individual slider value change
console.log(`Slider ${index} value changed to ${slider.value}`);
}
resetSlider(slider: { value: number }) {
// Reset the individual slider to its default value
slider.value = 10; // You can set the default value here
}
resetSliders() {
// Reset all sliders to their default values
this.sliders.forEach(slider => {
slider.value = 10;
});
}
applySliders() {
console.log('Applying slider values:', this.sliders.map(slider => slider.value));
}
}
Please provide assistance with above code for dragging sliders up and down individually