Deactivate interactive functions on the mat-slider while preserving the CSS styling

I'm attempting to create a mat-slider with a thumb label that remains visible at all times.

Below is my mat-slider component:

<mat-slider
    class="example-margin"
    [disabled]="false"
    [thumbLabel]="true"
    [tickInterval]="tickInterval"
    [(ngModel)]='value'
    >
</mat-slider>

To ensure the Thumb Label stays on screen, I've applied the following CSS properties:

::ng-deep .mat-slider-thumb-label {
  transform: rotate(45deg) !important;
  border-radius: 50% 50% 0 !important;
}

::ng-deep .mat-slider-thumb {
  transform: scale(0) !important;
}

::ng-deep .mat-slider-thumb-label-text {
  opacity: 1 !important;

}

However, when I disable interaction with the mat-slider by setting disabled=true, the styles disappear along with the thumb label, leaving an empty space in the bar.

This is what I want to achieve while keeping interactions disabled:

You can view a demo here.

javascripthtmlcssangularangular-material2

Answer №1

To achieve this effect, you can prevent pointer events on the control. I have made some adjustments to the CSS and disabled pointer-events as well.

Customized CSS

::ng-deep .mat-slider-thumb-label {
   transform: rotate(45deg) !important;
   background-color: #ffd740 !important;  <-- ensure color remains unchanged
   border-radius: 50% 50% 0 !important;
}

Inline style added

style="pointer-events: none;"

Link to StackBlitz demo : https://stackblitz.com/edit/angular-fkzv3z

Answer №2

Disabling it won't yield the desired outcome. A better approach would be to modify the disabled class styling, although this may not be the most efficient solution.

My suggestion is to simply disable pointer-events instead.

For example:

.example-margin {
  pointer-events: none;
}

By doing this, you can prevent pointer interactions and effectively resolve your use case.

Answer №3

Here is a handy solution for Angular 8 that eliminates the need to use ::ng-deep (as mentioned in Note below)

To make it work, simply define the following properties in your mat-slider:

  • class:"cdk-focused"
  • style:"pointer-events:none"

Below is a snippet of the HTML code sample:

            <mat-slider class="cdk-focused" style="pointer-events:none;" min="0" max="100" thumbLabel="true"
                disabled="false" [value]="item.percent" [displayWith]="formatPercentage">
            </mat-slider>

Note: ng-deep is deprecated

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

Choosing items by pressing "shift + up arrow"

I have a collection of elements, each representing one line of text. When you click on an element, it changes color. If you then hold down "shift + arrow up," the items above it are also selected. How can this functionality be implemented? My initial app ...

javascriptangularjs

Why is the body the last element in Angular modules arrays?

I have a question regarding architectural practices. When defining an Angular module, one common approach is to do it like this: angular.module('app', []) .controller('Ctrl', ['$scope', function Ctrl($scope) { //body.. ...

javascriptangularjs

Guide to filling out select dropdowns in HTML with information from a database

I'm new to PHP and HTML, so please be patient with me. I've been attempting to populate a select box using data from a MySQL database, but all I see is an empty textbox. Here's my current code: <select name="cargo"> <?php ...

phphtmlmysqldrop-down-menu

Programme for Server Login

After creating my own server, I attempted to implement a login feature to restrict access to its files. Unfortunately, using Javascript for this task proved to be insecure as usernames and passwords could easily be viewed in the source code: <form name ...

javascripthtmlauthenticationserver

Choose from the select2 multiselect options and lock certain selected choices from being altered

I have coded a select dropdown with preselected options, some of which I want to keep fixed so that users cannot change them. To achieve this, I implemented the following code: <select id="select2-multiple" name="users" multiple="multiple" style="width ...

javascriptjqueryjquery-select2multi-select

Having trouble passing parameters to the Mongo find collection operation

I'm having trouble with my code where req.params only gets a value after db.collection.find is executed. Can someone help me figure out what I'm doing wrong? exports.findAll = function(req, res) { var postal = parseInt(req.params.postal); ...

javascriptnode.jsmongodbnode-mongodb-native

Verify if the header value corresponds

How can I validate the header value in a Node.js application? I want to restrict access to a certain route only if the user includes a specific header and its value matches what is expected. For instance, let's say the route requires a header like Acc ...

javascriptnode.jsexpress

I'm experiencing an issue with fullCalendar where the dayRender function is not functioning as expected

I have been using fullCalendar and I am looking to customize the color of specific days. I have successfully created an overlay that is displayed when a user clicks on a particular day. Everything works as expected with the overlay, but now I am encounte ...

javascriptfullcalendar

Maintain functionality of React components even when they are not actively displayed

I have a unique page React app with different components. The App.js file controls which component to display based on server information. One specific component, the Stopwatch, is only rendered on two of the pages. Here's a snippet of code from my Ap ...

javascriptreactjsjsxsingle-page-application

Do Angular 2 component getters get reevaluated with each update?

What advantages do getters offer compared to attributes initialized using ngOnInit? ...

angulartypescript

How come my div can alter its own attributes on hover, but its sibling cannot?

As I delve into the realm of web development, my initial project involves creating a portfolio site. However, I am facing difficulties with the dropdown section in one of the menus. I incorporated a :hover pseudo-class to the dropdownhover div to signal ...

htmlcss

POST data not being sent via AJAX

I am trying to use AJAX to submit form data to a PHP function, but it seems like the data is not being transmitted. Here is the code for the HTML Form: <form onSubmit="return registration();" id="registration_form"> <input type="email" id="e ...

javascriptphpjqueryajax

Calculate the mean value of each array, and then determine which average is higher

After running the code snippet provided, I noticed that it outputs "first" instead of "second". Can you help me verify my logic here? I first calculate both averages and then compare them to return the greater one. Do you see any issues with this approac ...

javascript

Is there anyone available who can assist me in removing records from my Sequelize database?

I attempted to implement the code snippet below after coming across it on a popular platform, but for some reason, it doesn't seem to be functioning as expected. Posts.delete({ where: { createdAt: { isAfter: "2016-09-11" } } }) My goal is to remove ...

javascriptmysqlnode.jsexpresssequelize.js

Using Framework7 and AngularJS to efficiently load pages

When creating a phone application using phonegap, AngularJS, and Framework7, I encountered an issue with the page swapping functionality of Framework7. The problem arises because Framework7 injects new HTML pages into the DOM dynamically when a user click ...

javascriptangularjscordovahtml-framework-7

Directive not working on Mozilla Firefox

Currently, I have a directive set up to display an image as a background image. This works perfectly fine in Chrome and Safari, but for some reason, it doesn't seem to be functioning properly in Firefox as the background images are not showing up. Aft ...

javascriptangularjsangularjs-directive

The back-to-top button guides users back to their last visited page

I'm excited to explore AngularJS and I want to add two "return to top" buttons on different pages. Here's what I have so far: Page 1: <h1 id = "top"> .......... <a href="#top" target = "_self">Return to Top</a> Page ...

javascripthtmlangularjsangularjs-scopehref

In what way can a piped operator in rxjs be influenced by the value returned by a subsequent operator?

When attempting to examine values between operators in an rxjs pipe, I decided to use tap to log them to the console. I added two taps, one before a map operator used for sorting an Array, and one after. Surprisingly, both taps logged the same sorted Arra ...

angulartypescriptrxjsrxjs-pipeable-operators

I'm struggling to find a way to turn off the scroll bar

I'm having trouble disabling the scroll bar on my website for specific reasons. Can anyone provide me with some guidance? <iframe src="video" width="960"height="540" frameborder=0 ></iframe> ...

html

Nested divs with independent scrolling capabilities

I am interested in developing a gantt chart that displays days, months, and years at the top with tasks listed below. Here is my progress so far: https://i.stack.imgur.com/tr5y4.png In the image above, the scroll-x functionality works on everything incl ...

htmlcssscrolloverflowparent-child