How to take value from ng-slider in ng component in Angular

Question

I have created a slider as in input field. I am not able to get its value in formGroup. I am stucked.

My code:

<form [formGroup]="Form" novalidate (ngSubmit)="BasicDetail(Form.value)>
    <div class="col-md-8">
       <div class="drags">
         <input class="ex6" type="text" data-slider-min="0" data-slider-max="10" data-slider-step="1" data-slider-value="5"/>
       </div>
    </div>
</form>

Help needed.

Answer 1

1. Make sure input is slider type, meaning range
   

   type="range"

2. If you're going to create a submit form fucntion where you feed your form, then it's template-driven, so get rid of your formGroup property, (assuming this is what you want since you've shown no effort on the component.ts side) Give your form a reference form

   <form #form="ngForm" novalidate (ngSubmit)="BasicDetail(form.value)">

3. Create a button to submit

   <button class="btn btn-primary"type="submit"> Submit </button>

4. Make sure to give your form input a name, and assign it ngModel

5. If you want also direct access, create a two-way binding, say with variable called rangeValue

   [(ngModel)]="rangeValue"

6. Make sure you're actually using real range input types, I don't know where you got data-slider from

 <form #form="ngForm" novalidate (ngSubmit)="BasicDetail(form.value)">
  <div class="col-md-8">
    <div class="drags">
      <input class="ex6"
             type="range"
             min="0" max="10"
             step="1"
             name="someRange"
             [(ngModel)]="rangeValue"
             ngModel/>
    </div>
  </div>
  <button class="btn btn-primary"type="submit"> Submit </button>
</form>

7. Inside your component.ts, declare variable and try to log it on submit

  rangeValue = 5;
  constructor( ) {}

  ngOnInit() {
  }

  BasicDetail(form: any) {
    console.log(this.rangeValue);
    console.log(form.someRange);
  }