Set Initial Values to Input Range in Angular

Question

For one of my projects I have implemented an input range slider with custom styling. when the component initializes I want to set max price as the default value in the slider. I tried a couple of ways but I couldn't find a solution for that.can someone tells what I am doing wrong.this is stackblitz demo of my implementation

It looked a bit overcomplicated: Just bind a single formControl on the slider element and use the setValue method. You were correctly passing along the data as Inputs — Robin De Schepper
– Robin De Schepper, Commented Apr 10, 2020 at 14:32
@RobinDeSchepper nothing has changed in above link.i think you forgot to save — NicoleZ
– NicoleZ, Commented Apr 10, 2020 at 14:33
I have to get that value changes as a stream that why used from control then I can subscribe to value changes.btw before I post here I tried setValue() and patchValue() both either of those not worked for me. — NicoleZ
– NicoleZ, Commented Apr 10, 2020 at 14:35

Muhammed Albarmavi · Accepted Answer · 2020-04-10 14:53:19Z

2

you need to create an input property for the value and set the formcontrol and bind this to input elemnt like this component

  @Input() value:number; // default value

  constructor(){
    this.inputForm = new FormGroup({priceRangeSlider : new FormControl(null)});
  }

  ngOnInit() {
    this.slider.valueChanges.subscribe(values =>{
      this.priceForDisplay = values;
    })

    this.inputForm.get('priceRangeSlider').setValue(this.value); // init value set 
  }

template

    <div class="slider-container">
      <input
        class="slider"
        type="range"
        formControlName="priceRangeSlider"
        [min]="minPrice"
        [max]="maxPrice"
        step="100"
        [value]="value"
      />
    </div>

app template

<app-user [minPrice]="1000" [maxPrice]="10000"  [value]="4000"><app-user>

demo 🚀

edited Apr 10, 2020 at 14:53

answered Apr 10, 2020 at 14:46

Muhammed Albarmavi

24.6k9 gold badges72 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Robin De Schepper · Accepted Answer · 2020-04-10 14:43:01Z

1

I edited your code example: https://stackblitz.com/edit/create-a-basic-angular-component-amnhih

I bound a FormControl to the slider element and moved the initial setValue call to below the subscription.

answered Apr 10, 2020 at 14:43

Robin De Schepper

6,5345 gold badges44 silver badges66 bronze badges

Collectives™ on Stack Overflow

Set Initial Values to Input Range in Angular

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related