Issue with updating md-slider value using ng-model when md-discrete directive is applied

var app = angular.module('StarterApp', ['ngMaterial']);
.overflow-hidden{ 
                overflow: hidden;
            }
            
            md-slider:not(.active) .md-thumb-container{
                  transition: transform .4s cubic-bezier(.25,.8,.25,1)!important;    
            }
            
            md-slider:not(.active) .md-track-fill{
              transition: width .4s cubic-bezier(.25,.8,.25,1)!important; 
            }
<html lang="en" ng-app="StarterApp">
              <head>
                <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/0.7.1/angular-material.min.css">
              </head>
              <body layout="column">
                <div>
                  <!-- overflow-hidden because the scrolling (known issue) -->
                  <md-content class="md-padding overflow-hidden">
                    <h3>Demo</h3>
                    <div layout>
                      <md-slider flex md-discrete step="1" min="1" max="25" aria-label="rating" ng-model="value">
                      </md-slider>
                      
                    </div>
                    <p>Value = {{value}}</p>
                    
                  </md-content>
                </div>
                <!-- Angular Material Dependencies -->
                <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
                <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.min.js"></script>
                <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-aria.min.js"></script>

                <script src="//ajax.googleapis.com/ajax/libs/angular_material/0.7.1/angular-material.min.js"></script>
              </body>
            </html>

when sliding ng-model value does not update in md-slider when using the md-discrete directive. It works fine without it. How can this be resolved to work with md-discrete?

Answer №1

When using md-discrete, the intention is to only update the ng-model at the end of a drag, avoiding unnecessary updates during every change of the slider. This is particularly useful when running a heavy function that could be time-consuming. If you prefer immediate updates without waiting for the drag-end, it is recommended to use md-slider without md-discrete.

var app = angular.module('StarterApp', ['ngMaterial']);
.overflow-hidden{ 
  overflow: hidden;
}

md-slider:not(.active) .md-thumb-container{
      transition: transform .4s cubic-bezier(.25,.8,.25,1)!important;    
}

md-slider:not(.active) .md-track-fill{
  transition: width .4s cubic-bezier(.25,.8,.25,1)!important; 
}
<html lang="en" ng-app="StarterApp">
  <head>
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/0.7.1/angular-material.min.css">
  </head>
  <body layout="column">
    <div>
      <!-- overflow-hidden because the scrolling (known issue) -->
  <md-content class="md-padding overflow-hidden">
    <h3>Demo</h3>
    <div layout>
      <md-slider flex step="1" min="1" max="25" aria-label="rating" ng-model="value">
      </md-slider>
      
    </div>
    <p>Value = {{value}}</p>
    
  </md-content>
</div>
    <!-- Angular Material Dependencies -->
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-aria.min.js"></script>

    <script src="//ajax.googleapis.com/ajax/libs/angular_material/0.7.1/angular-material.min.js"></script>
  </body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular 4 Password Regular Expression Not Working

My validation regex checks for at least 8 characters, including one number, one uppercase letter, one lowercase letter, and one special character. Here is the regex I am using: '(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[$@$!%*?&])[A-Za-zd$@$!%*?& ...

Utilizing Modal Popups in ASP.NET MVC for Button Clicks Embedded within a jQuery Datatable

For my current project, I am working on a page that includes a table with data. However, I want to implement a Bootstrap modal to display unique message content in the popup body when a button is clicked within each row of the table. The challenge I am fac ...

Can you extract information from the XML file and modify the anchor tags?

<description> <div class="field field-name-field-image field-type-image field-label- hidden"><div class="field- items"><div class="field-item even"><a href="/news/news/vg"> ...

What is the best way to display monthly data in a stacked bar chart using Recharts?

My data is structured as follows: [ { "CarbonAmount": 120, "CarbonDescription": null, "Date": "2022-03-14" }, { "CarbonAmount": 140, "CarbonDescription": "Electricity", "Date": "2022-04-11" } ] I am aiming to format it ...

Try utilizing multiple URLs to trigger separate AJAX requests with a single click

I am looking to utilize multiple JSON files from different URL APIs simultaneously. Each URL will serve a different purpose - populating table headers with one URL, and table information with two or three URLs. Currently, my code looks like this: $(docum ...

Firefox version 78.0.1's Responsive Design Mode fails to provide accurate window.innerWidth values after screen orientation change

Could this be a bug specific to Firefox, or have I made an error somewhere? When testing in Chrome or on an actual device like Android, everything works fine. It appears to be an issue only when using Firefox's Responsive Design Mode. Below is the c ...

The error message "Data type must be consistent across all series on a single axis in Google Chart" may cause confusion

I'm struggling with an error message that appears when I try to run my Google chart. Here is the code I am using to generate the chart. function (resultVal) { var arrMain = new Array();//[]; for (var i = 0; i < resultVal.length; i++) { ...

How can we alter all elements that are missing an index?

Is there a way to selectively hide all elements with the class .dropdown-menu, except for the second one? I've tried using the following code snippet, but it doesn't seem to be working: $('.dropdown-menu').not().eq(1).hide(); If anyon ...

What is the most effective way to enlarge an HTML table in the center?

Currently, I am dynamically generating an HTML table using a repeater. The table consists of four columns that I populate with company data. My goal is to enable users to click on a row and have another row appear below it, containing a Google map and addi ...

The parameters passed in an axios get request are not carried over to a create request

Exploring the capabilities of the YouTube API with ReactJS While working with the YouTube API, I came across the create method in axios. However, I faced an issue where the params were getting overwritten. What am I missing here? I have a file named yout ...

Guide on extracting data from a JavaScript table using Python

Looking to extract information from a table on this page: . There are a total of 18 pages, but the url remains constant for each page. My usual method involves using BeautifulSoup to scrape data from HTML pages. However, in this case, the required data is ...

What could be causing my Django Slick-Slider carousel to malfunction?

I have encountered numerous posts discussing the same issue, but unfortunately, none of them offered a solution that worked for me. The slick-slider folder is properly stored in my static files and is being accessed correctly, yet no changes are reflected ...

Tips for efficiently loading data into a vuex module only when it is required and addressing issues with async/await functionality

Is there a method to load all the data for a Vuex store once and only load it when necessary? I believe there is, but I am having trouble implementing it. I'm not sure if it's due to my misunderstanding of Vuex or Async/Await in Javascript promi ...

Error encountered in jQueryUI Autocomplete: the function 'this.source' is not defined

I have been working on incorporating a live search feature that scans through keys in a JSON obtained from a public API. To achieve this, I am utilizing Jquery UI. However, I encountered the following error and I am uncertain about how to resolve it. Un ...

Ways to identify the visible elements on a webpage using JavaScript

I'm working on a nextjs app , I am looking to dynamically update the active button in the navbar based on which section is currently visible on the page. The child elements of the page are structured like this: <div id="section1" > < ...

Collect the text shown in an alert message created with JavaScript

I'm currently unsure if this is achievable or not. In one of my scenarios, I aim to extract text that appears in alert boxes on external websites by including my JavaScript file. Is there a method to obtain the text content shown in an alert message ...

The HTTP request returned an error with status code 400

I am facing an issue while trying to post an object from the backend - I always receive error 400. I am not sure if the problem lies in the front-end or the backend: Here is the index.html code snippet: <div ng-controller="signupCtrl"> ...

``I am curious about using react-particles-js as a dynamic background for my React projects. It would

Currently, I am in the process of developing my portfolio using React.js and have implemented react-particles-js for the background. However, I want this component to function as the background itself. Are there any alternative solutions similar to react-p ...

Removing a select menu in Discord.js once a selection has been made

Currently in the process of creating a ticket tool that utilizes a select menu for choosing a topic const row = new MessageActionRow() .addComponents( new MessageSelectMenu() .setCustomId(`select_menu`) .setPlac ...

Matching queries precisely in MongoDB

I developed an Express.js API with MongoDB integration that filters products based on a filter property. The issue I am facing is ensuring that the API output exactly matches the filter property criteria. Currently, if Product A has [{name: 'a', ...