Angular Matrial Slider Data Binding while dragging












1














I'm trying to control the audio volume with a material slider. Just like the YouTube audio slider. I use two way data binding like this:



  <mat-slider min="0" max="1" step="0.01" [(value)]="settingsService.audioTick.volume"></mat-slider>


The problem is, the value will only get updated when I stop dragging the slider. Which is a bad user experience because I don't immediately hear if that is a good volume. So I somehow need to do data binding while dragging.



Here is a StackBlitz: https://stackblitz.com/angular/rojampjmlap



Any Idea?






angular angular-material







share|improve this question



























    1














    I'm trying to control the audio volume with a material slider. Just like the YouTube audio slider. I use two way data binding like this:



      <mat-slider min="0" max="1" step="0.01" [(value)]="settingsService.audioTick.volume"></mat-slider>


    The problem is, the value will only get updated when I stop dragging the slider. Which is a bad user experience because I don't immediately hear if that is a good volume. So I somehow need to do data binding while dragging.



    Here is a StackBlitz: https://stackblitz.com/angular/rojampjmlap



    Any Idea?






    angular angular-material







    share|improve this question

























      1












      1








      1







      I'm trying to control the audio volume with a material slider. Just like the YouTube audio slider. I use two way data binding like this:



        <mat-slider min="0" max="1" step="0.01" [(value)]="settingsService.audioTick.volume"></mat-slider>


      The problem is, the value will only get updated when I stop dragging the slider. Which is a bad user experience because I don't immediately hear if that is a good volume. So I somehow need to do data binding while dragging.



      Here is a StackBlitz: https://stackblitz.com/angular/rojampjmlap



      Any Idea?






      angular angular-material







      share|improve this question













      I'm trying to control the audio volume with a material slider. Just like the YouTube audio slider. I use two way data binding like this:



        <mat-slider min="0" max="1" step="0.01" [(value)]="settingsService.audioTick.volume"></mat-slider>


      The problem is, the value will only get updated when I stop dragging the slider. Which is a bad user experience because I don't immediately hear if that is a good volume. So I somehow need to do data binding while dragging.



      Here is a StackBlitz: https://stackblitz.com/angular/rojampjmlap



      Any Idea?






      angular angular-material




      angular angular-material






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Nov 20 at 21:13









      Jonas

      366116




      366116
























          2 Answers
          2






          active

          oldest

          votes


















          2














          You can use the [value] property binding syntax to pass someValue as an @Input to MatSlider. MatSlider has an @Output property defined named input that gets triggered when the input value changes. You can listen to that and simply re-assign whatever is returned as the $event data to someValue.



          Here, give this a try:



          Template:



          <mat-slider 
          
  (input)="someValue = $event.value" 
          
  [value]="someValue">
          
</mat-slider>
          

          
{{ someValue }}


          Component:



          import {Component} from '@angular/core';
          

          
@Component({...})
          
export class SliderOverviewExample {
          
  someValue = 0;
          
}


          Here's an Updated Sample StackBlitz for your ref.






          share|improve this answer























          • Thanks, works great!
            – Jonas
            Nov 21 at 15:19





















          2














          You need to bind to the input Output property to get the live data change. Example:



          <mat-slider
          
  min="0"
          
  max="1"
          
  step="0.01"
          
  (input)="settingsService.audioTick.volume = $event.value"
          
  [value]="settingsService.audioTick.volume" />





          share|improve this answer



















          • 3




            You shouldn't two-way bind [(value)] and also bind (input) to the same property. Just read bind [value].
            – G. Tranter
            Nov 20 at 21:23










          • Thank you! Works like it should
            – Jonas
            Nov 21 at 15:20











          Your Answer






          StackExchange.ifUsing("editor", function () {
          StackExchange.using("externalEditor", function () {
          StackExchange.using("snippets", function () {
          StackExchange.snippets.init();
          });
          });
          }, "code-snippets");

          StackExchange.ready(function() {
          var channelOptions = {
          tags: "".split(" "),
          id: "1"
          };
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function() {
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled) {
          StackExchange.using("snippets", function() {
          createEditor();
          });
          }
          else {
          createEditor();
          }
          });

          function createEditor() {
          StackExchange.prepareEditor({
          heartbeatType: 'answer',
          autoActivateHeartbeat: false,
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader: {
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          },
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          });


          }
          });














          draft saved

          draft discarded


















          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53401623%2fangular-matrial-slider-data-binding-while-dragging%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown

























          2 Answers
          2






          active

          oldest

          votes








          2 Answers
          2






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes









          2














          You can use the [value] property binding syntax to pass someValue as an @Input to MatSlider. MatSlider has an @Output property defined named input that gets triggered when the input value changes. You can listen to that and simply re-assign whatever is returned as the $event data to someValue.



          Here, give this a try:



          Template:



          <mat-slider 
          
  (input)="someValue = $event.value" 
          
  [value]="someValue">
          
</mat-slider>
          

          
{{ someValue }}


          Component:



          import {Component} from '@angular/core';
          

          
@Component({...})
          
export class SliderOverviewExample {
          
  someValue = 0;
          
}


          Here's an Updated Sample StackBlitz for your ref.






          share|improve this answer























          • Thanks, works great!
            – Jonas
            Nov 21 at 15:19


















          2














          You can use the [value] property binding syntax to pass someValue as an @Input to MatSlider. MatSlider has an @Output property defined named input that gets triggered when the input value changes. You can listen to that and simply re-assign whatever is returned as the $event data to someValue.



          Here, give this a try:



          Template:



          <mat-slider 
          
  (input)="someValue = $event.value" 
          
  [value]="someValue">
          
</mat-slider>
          

          
{{ someValue }}


          Component:



          import {Component} from '@angular/core';
          

          
@Component({...})
          
export class SliderOverviewExample {
          
  someValue = 0;
          
}


          Here's an Updated Sample StackBlitz for your ref.






          share|improve this answer























          • Thanks, works great!
            – Jonas
            Nov 21 at 15:19
















          2












          2








          2






          You can use the [value] property binding syntax to pass someValue as an @Input to MatSlider. MatSlider has an @Output property defined named input that gets triggered when the input value changes. You can listen to that and simply re-assign whatever is returned as the $event data to someValue.



          Here, give this a try:



          Template:



          <mat-slider 
          
  (input)="someValue = $event.value" 
          
  [value]="someValue">
          
</mat-slider>
          

          
{{ someValue }}


          Component:



          import {Component} from '@angular/core';
          

          
@Component({...})
          
export class SliderOverviewExample {
          
  someValue = 0;
          
}


          Here's an Updated Sample StackBlitz for your ref.






          share|improve this answer














          You can use the [value] property binding syntax to pass someValue as an @Input to MatSlider. MatSlider has an @Output property defined named input that gets triggered when the input value changes. You can listen to that and simply re-assign whatever is returned as the $event data to someValue.



          Here, give this a try:



          Template:



          <mat-slider 
          
  (input)="someValue = $event.value" 
          
  [value]="someValue">
          
</mat-slider>
          

          
{{ someValue }}


          Component:



          import {Component} from '@angular/core';
          

          
@Component({...})
          
export class SliderOverviewExample {
          
  someValue = 0;
          
}


          Here's an Updated Sample StackBlitz for your ref.







          share|improve this answer














          share|improve this answer



          share|improve this answer








          edited Nov 20 at 21:32

























          answered Nov 20 at 21:26









          SiddAjmera

          12.4k31137




          12.4k31137












          • Thanks, works great!
            – Jonas
            Nov 21 at 15:19




















          • Thanks, works great!
            – Jonas
            Nov 21 at 15:19


















          Thanks, works great!
          – Jonas
          Nov 21 at 15:19






          Thanks, works great!
          – Jonas
          Nov 21 at 15:19















          2














          You need to bind to the input Output property to get the live data change. Example:



          <mat-slider
          
  min="0"
          
  max="1"
          
  step="0.01"
          
  (input)="settingsService.audioTick.volume = $event.value"
          
  [value]="settingsService.audioTick.volume" />





          share|improve this answer



















          • 3




            You shouldn't two-way bind [(value)] and also bind (input) to the same property. Just read bind [value].
            – G. Tranter
            Nov 20 at 21:23










          • Thank you! Works like it should
            – Jonas
            Nov 21 at 15:20
















          2














          You need to bind to the input Output property to get the live data change. Example:



          <mat-slider
          
  min="0"
          
  max="1"
          
  step="0.01"
          
  (input)="settingsService.audioTick.volume = $event.value"
          
  [value]="settingsService.audioTick.volume" />





          share|improve this answer



















          • 3




            You shouldn't two-way bind [(value)] and also bind (input) to the same property. Just read bind [value].
            – G. Tranter
            Nov 20 at 21:23










          • Thank you! Works like it should
            – Jonas
            Nov 21 at 15:20














          2












          2








          2






          You need to bind to the input Output property to get the live data change. Example:



          <mat-slider
          
  min="0"
          
  max="1"
          
  step="0.01"
          
  (input)="settingsService.audioTick.volume = $event.value"
          
  [value]="settingsService.audioTick.volume" />





          share|improve this answer














          You need to bind to the input Output property to get the live data change. Example:



          <mat-slider
          
  min="0"
          
  max="1"
          
  step="0.01"
          
  (input)="settingsService.audioTick.volume = $event.value"
          
  [value]="settingsService.audioTick.volume" />






          share|improve this answer














          share|improve this answer



          share|improve this answer








          edited Nov 20 at 21:29

























          answered Nov 20 at 21:20









          Teddy Sterne

          6,74311529




          6,74311529








          • 3




            You shouldn't two-way bind [(value)] and also bind (input) to the same property. Just read bind [value].
            – G. Tranter
            Nov 20 at 21:23










          • Thank you! Works like it should
            – Jonas
            Nov 21 at 15:20














          • 3




            You shouldn't two-way bind [(value)] and also bind (input) to the same property. Just read bind [value].
            – G. Tranter
            Nov 20 at 21:23










          • Thank you! Works like it should
            – Jonas
            Nov 21 at 15:20








          3




          3




          You shouldn't two-way bind [(value)] and also bind (input) to the same property. Just read bind [value].
          – G. Tranter
          Nov 20 at 21:23




          You shouldn't two-way bind [(value)] and also bind (input) to the same property. Just read bind [value].
          – G. Tranter
          Nov 20 at 21:23












          Thank you! Works like it should
          – Jonas
          Nov 21 at 15:20




          Thank you! Works like it should
          – Jonas
          Nov 21 at 15:20


















          draft saved

          draft discarded




















































          Thanks for contributing an answer to Stack Overflow!


          • Please be sure to answer the question. Provide details and share your research!

          But avoid …



          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.


          To learn more, see our tips on writing great answers.





          Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


          Please pay close attention to the following guidance:


          • Please be sure to answer the question. Provide details and share your research!

          But avoid …



          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.


          To learn more, see our tips on writing great answers.




          draft saved


          draft discarded














          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53401623%2fangular-matrial-slider-data-binding-while-dragging%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          -

          Popular posts from this blog

          Wiesbaden

          Image
          Wappen Deutschlandkarte 50.0825 8.24 117 Koordinaten: 50° 5′  N , 8° 14′  O Basisdaten Bundesland: Hessen Regierungsbezirk: Darmstadt Höhe: 117 m ü. NHN Fläche: 203,93 km 2 Einwohner: 278.654 (31. Dez. 2017) [1] Bevölkerungsdichte: 1366 Einwohner je km 2 Postleitzahlen: 65183–65207, 55246, 55252 Vorlage:Infobox Gemeinde in Deutschland/Wartung/PLZ enthält Text Vorwahlen: 0611, 06122, 06127, 06134 Kfz-Kennzeichen: WI Gemeindeschlüssel: 06 4 14 000 LOCODE: DE WIB NUTS: DE714 Stadtgliederung: 26 Ortsbezirke Adresse der Stadtverwaltung: Schlossplatz 6 65183 Wiesbaden Webpräsenz: www.wiesbaden.de Oberbürgermeister: Sven Gerich (SPD) Lage der Landeshauptstadt Wiesbaden in Hessen und im Regierungsbezirk Darmstadt Offizielles Logo der Landeshauptstadt Wiesbaden Flagge der Landeshauptstadt Wiesbaden Wiesbaden is
          Read more

          Marschland

          Image
          Kilometerweite Marsch in den Vier- und Marschlanden am Elbdeich Die Wedeler Marschlandschaft in Schleswig-Holstein Der Hadelner Kanal zur Entwässerung der Marsch Die tief gelegene Marsch und ein Entwässerungskanal Das Schöpfwerk Otterndorf im Land Hadeln zur Entwässerung der Medem verfügte damals bereits über die größte Kreiselpumpe Europas. Das Schöpfwerk in Neuhaus für die Aue und des Neuhaus-Bülkauer Kanals Als Marsch(land) (v. niederdt., altsächs. mersc ) – auch Masch , Mersch oder Schwemmland genannt – bezeichnet man eine nacheiszeitlich entstandene geomorphologische Landform im Gebiet der nordwestdeutschen Küsten und Flüsse sowie vergleichbare Landformen weltweit. Inhaltsverzeichnis 1 Landschaft 2 Entstehung 3 Marschböden 4 Nutzung 5 Marschgebiete in Deutschland 6 Siehe auch 7 Literatur 8 Weblinks 9 Einzelnachweise Landschaft | Marschen sind generell flache Landstriche ohne natürliche Erhebungen. Si
          Read more

          Dieringhausen

          Image
          Dieringhausen Stadt Gummersbach 50.982777777778 7.5316666666667 165 Koordinaten: 50° 58′ 58″  N , 7° 31′ 54″  O Höhe: 165  (160–245)  m Einwohner: 5055  (30. Jun. 2016) Postleitzahl: 51645 Vorwahl: 02261 Lage von Dieringhausen in Gummersbach Im Hohl ca. 1927–1930 Ansicht von Südwesten bei Bünghausen Dieringhausen (im örtlichen Dialekt Dierkesen ) ist ein Ortsteil von Gummersbach im Oberbergischen Kreis, Regierungsbezirk Köln, Nordrhein-Westfalen (Deutschland). Inhaltsverzeichnis 1 Geographie 2 Geschichte 3 Kultur 3.1 Sehenswürdigkeiten 3.2 Regelmäßige Veranstaltungen 4 Infrastruktur und Wirtschaft 4.1 Verkehr 4.1.1 Schienen- und Busverkehr 4.1.2 Straßen 4.2 Öffentliche Einrichtungen 4.2.1 Schulen und Bildungseinrichtungen 4.2.2 Kirchliche Einrichtungen 5 Persönlichkeiten 5.1 In Dieringhausen geboren 5.2 In Dieringhausen gelebt 6 Einzelnachweise 7
          Read more