I am currently exploring the functionality of md-slider in its md-discrete mode. However, I would like to have the slider bubble always visible on the screen, similar to this:
I do not want the slider bubble to disappear when clicking elsewhere. Is there a way to achieve this desired behavior?
To modify the appearance of the bubbles, you can override specific CSS rules that control their display. By default, the bubbles are only visible during active or focus states using the following rule:
md-slider[md-discrete]:not([disabled]):focus .md-sign,
md-slider[md-discrete]:not([disabled]):focus .md-sign:after,
md-slider[md-discrete]:not([disabled]).active .md-sign,
md-slider[md-discrete]:not([disabled]).active .md-sign:after {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0) scale(1);
transform: translate3d(0, 0, 0) scale(1);
}
To always display the bubbles, you can create a new absolute rule like this:
md-slider[md-discrete] .md-sign,
md-slider[md-discrete] .md-sign:after {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0) scale(1);
transform: translate3d(0, 0, 0) scale(1);
}
A different method to create a shortcut is to utilize onblur="this.focus()" in this manner:
<md-slider id="my-slider" flex onblur="this.focus()" md-discrete ng-model="3" min="1" max="5" aria-label="rating">
Then, within the JavaScript code, add:
$("#my-slider").focus();
After trying multiple solutions, I finally found the one that resolved my issue. Simply adding the css class "_md-active" to the slider did the trick for me.
document.getElementById("YOUR-MD-SLIDER-ID").classList.add("_md-active");
When it comes to md-slider, there are two main components: md-track-container and md-thumb-container. These parts can be customized using CSS to suit your needs perfectly. Below is both an image demonstration and the accompanying code snippet for reference.
<md-slider title="md-title" style="margin-top: -31px;margin-left: 45px;" id="red-slider" md-discrete="" round="0" ng-model="" step="5" min="0" max="100" aria-label="rating" class="ng-pristine ng-untouched ng-valid ng-isolate-scope ng-empty" tabindex="0" role="slider" aria-valuenow="55" aria-invalid="false" aria-valuemin="0" aria-valuemax="100">
<div class="md-slider-wrapper">
<div class="md-track-container">
<div class="md-track"></div>
<div class="md-track md-track-fill" style="width: 55%;"></div>
<div class="md-track-ticks"><canvas style="position:absolute;" width="151" height="5"></canvas> </div>
</div>
<div class="md-thumb-container" style="left: 55%;">
<div class="md-thumb"></div>
<div class="md-focus-thumb"></div>
<div class="md-focus-ring"></div>
<div class="md-sign"><span class="md-thumb-text">55</span></div><div class="md-disabled-thumb"></div>
</div>
</div>
</md-slider>
CSS:
md-slider[md-discrete] .md-track-container,
md-slider[md-discrete] .md-track-container:after {
height: 5px;
}
md-slider[md-discrete] .md-track-ticks,
md-slider[md-discrete] .md-track-ticks:after {
display: none;
}
Always displaying the bubble
.mat-slider-horizontal .mat-slider-thumb-label {
transform: rotate(45deg) !important;
}
Ensuring text visibility
.mat-slider-thumb-label-text {
opacity: 1 !important;
}
Customizing thumb colors
.mat-slider-min-value.mat-slider-thumb-label-showing .mat-slider-thumb,
.mat-slider-min-value.mat-slider-thumb-label-showing .mat-slider-thumb-label {
background-color: green;
}
Adjusting fill color
.mat-accent .mat-slider-track-fill, .mat-accent .mat-slider-thumb, .mat-accent .mat-slider-thumb-label {
background-color: $greenColor;
}
Here's the method that worked for me:
::ng-deep {
.mat-slider-thumb-label {
transform: rotate(45deg) !important;
border-radius: 50% 50% 0 !important;
}
.mat-slider-thumb {
transform: scale(0) !important;
}
.mat-slider-thumb-label-text {
opacity: 1 !important;
}
}
I found this solution from user michaelpwilson on this page: https://github.com/angular/components/issues/4803
In the code I'm working with, there is a similar structure to this: <div ng-if="variableThatEvaluatesToFalse"> <input id="location"> </div> I'm attempting to hide a component initially and then display it based on user inpu ...
Looking to add a fixed menu to my website that stays at the top even when scrolling down the page. For an example, check out iplex.co.in for a demonstration. ...
https://i.sstatic.net/nDrxq.png Trying to replicate the layout from this image for my blog, but struggling with the source code. Any suggestions on how to achieve a similar design without using divs within table rows? Looking for a cleaner solution. ...
I am working with a collection of elements using find_elements_by_css_selector, and my next task is to extract their css locators. I attempted the following approach: foo.get_property('css_selector') However, it seems to be returning None. ...
In order to give the Administrator the ability to customize the Admin Dashboard Layout and provide an option for them to upload their own layouts or "Premium" layouts, I need to implement a solution. I have considered one approach: Utilizing CSS (allowin ...
I have a scaled down version of my project, but it's not quite what I need. I would like the green div to have some transparency so that the content behind both divs is visible (there is none in the example, but there is in my actual project). However ...
Is there a way to require and use ngModel inside the controller of a custom Angular directive without using the link function? I have seen examples that use the link function, but I want to know if it's possible to access ngModel inside the directive ...
When working with Angular, I encountered an issue trying to set a default value for a select box using ng-init from an object that is generated during runtime. Here's the code snippet that's causing me trouble: <select ng-model= ...
I'm currently working with Nodejs and AngularJS, and I've encountered an issue regarding populating a table in the front-end from a generated JSON file. Below is my ejs file: <% include layout %> <div class="panel panel-info"> < ...
Within my AngularJS framework template, I have the following snippet of html code: <ul class="sb-parentlist"> <h1 class={{headerClass}}> Popular</h1><div data-ng-repeat="data in data track by $index"> <li> ...
I am currently developing a Django website to enhance my skills in coding, CSS, Html, and Bootstrap. However, I am encountering an issue with the main page of my site. The visuals on my cards do not align properly with the colored boxes at the top of the p ...
**Why isn't my jQuery script coloring the rows as expected when certain conditions are met (I italicized the specific part of the code)?** Here is the HTML CODE for the POLL: <form id="pollForm" class="mb-4"> <d ...
I am having trouble displaying the last messages in my simple contact list as the text is getting cut off the screen. Below is the code I am using: (the readableTimestamp should be positioned behind the text.) View style={{ fontSize: 16, backgro ...
I have an image column within a grid, where the images are displayed at 25px x 25px to fit nicely in each row. I've added a hover effect to the images so that when you hover over them, they shift left (which is working) and then expand for better vis ...
I am facing an issue with an element where I set top: -100%. My requirement is to translate top: -100% to top: -{height-of-the-element}. Unfortunately, instead of getting top: -{height-of-the-element}, I am getting top: -{height-of-another-element-wrapping ...
My goal is to use $http to fetch data (such as students), then make another $http call to retrieve studentDetails. Next, I want to add a portion of studentDetails to the students JSON. The tricky part is that I need the response from the first call to cre ...
I am trying to modify a single attribute in my class using a JavaScript function. .msg_archivedropdown:before { content:""; display: block; position:absolute; width:0; height:0; left:-7px; top:0px; border-top: 10px solid tr ...
I am looking to highlight two sections of a page simultaneously. Here is what I currently have: <li class="langLI" style="list-style-type:none"><a href="/non-discrimination-and-language-assistance##French">| French Creole</a></li> ...
Recently, I delved into the world of web development and decided to test my skills by creating a basic webpage with an interactive top navigation bar. Depending on the link clicked, specific HTML elements would be displayed while turning off others using a ...
I'm encountering a challenging issue that's difficult to articulate. Here is a link to a JSFiddle that demonstrates the problem: https://jsfiddle.net/z8L392ug/ enter code here The problem stems from my utilization of a news API for F1 stories. W ...