The z-index property in CSS is ineffective on Firefox browsers

My current project involves implementing a dual slider input range. The HTML code I have written looks like this:

.acCalcInputRange input[type="range"] {
  pointer-events: none;
  position: absolute;
  bottom: 0.6rem;
  border: none;
  outline: none;
  height: 6px;
  margin: 0;
  padding: 0;
}

//for input thumb
.acCalcInputRange input[type="range"]::-moz-range-thumb {
  pointer-events: all;
  position: relative;
  z-index: 10;
  -moz-appearance: none;
  width: 15px;
  height: 15px;
  border: none;
  background-color: blue;
  cursor: pointer;
}
<div class="acCalcInputRange">
  <input type="range" class="form-range input-range" value="30000" id="customRange1" min="10000" max="90000" onchange="HomeInputChange()">
  <input type="range" class="form-range input-range" value="70000" id="customRange2" min="10000" max="90000" onchange="HomeInputChange()">
</div>

Despite my efforts, one of the thumbs is not appearing correctly. I have tried various solutions but haven't been able to fix the issue. Can anyone provide assistance in resolving this?

Edit: I aimed to achieve this and successfully implemented it on Chrome https://i.sstatic.net/PC0Zm.png

However, on Firefox, I encountered some issues: https://i.sstatic.net/Qi0Xa.png

If anyone can help, I would greatly appreciate it!

cssfirefoxz-index

Answer №1

Both sliders in question have equivalent z-index values, causing the second slider to cover the first one.

It appears that the method you are utilizing may not be optimal for generating a dual-slider input range.

If you are seeking a more effective solution, I recommend checking out this codepen: https://codepen.io/uniquecoder/pen/ABCDEF

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

"Trouble with image height not scaling correctly in Internet Explorer when using the img tag

I am facing an issue that can be observed by visiting this link using Internet Explorer. Interestingly, everything functions perfectly in all other browsers (although Chrome displays little blue squares next to the images for some unknown reason). Here i ...

htmlcssinternet-explorer

"What is the purpose of using the `position: absolute` property for movement transitions while deleting an item from a list

Click here to see an example where items smoothly move in a list when one item is removed. To achieve this effect, the element needs to be styled with: .list-complete-leave-active { position: absolute; } I'm curious as to why it doesn't work w ...

javascriptcssanimationvue.js

Thymeleaf: Automating the Adjustment of Content Fragments

In my project using Spring MVC and Thymeleaf, there is a default fragment that sets up the page structure. Here's what it looks like: <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/ ...

csshtmlthymeleaf

How come I am unable to squeeze in 4 columns with cards on a compact screen while utilizing Bootstrap 4?

After several attempts, the 4 columns still refuse to conform to a smaller screen size. The final column ends up being displayed horizontally at the bottom of the cards. @media (max-width: 575px) { .crd-group { flex-wrap: wrap; } .cr ...

htmlcssbootstrap-4

I am attempting to dynamically align the images of two articles. The exact heights of the containers are not specified. Can anyone provide guidance on how to achieve this?

My code snippets: <article class="featured"> <img src="http://www.placehold.it/300x100/ff0000"> <p> <!--Text--> </p> </article> <article class="sub-featured"> <img src="http://www.placeh ...

css

The ion-content scrolling directive is failing to show any displayed information

Within my Ionic application, I have a very simple HTML structure: <ion-pane> <ion-header-bar class="bar-stable"> <h1 class="title">Ionic Blank Starter</h1> </ion-header-bar> <ion-content> ...

cssangularjsionic-framework

Create and adapt dynamic tiles to fit within the available width

I am looking to create a dynamic tile (div) that adjusts based on the number of users available, similar to how it works in Microsoft Teams meetings. For example, if there is only one user, the div should occupy the full screen. When there are two users ...

javascriptcssbootstrap-4flexboxresponsive-design

Modifying the color of an empty string is not feasible in Javascript

Is it possible to change the color of FirstName only when there is text input? Currently, it turns green when there's text, but I want it to turn red when it's empty. How can this be achieved? $(document).on("click", '.btn-info.mailCo ...

javascripthtmlcssstring

Is there a challenge in setting up a tag search bar similar to Stack Overflow's?

First and foremost, I apologize for the awkwardly phrased question. The issue at hand is that when the tags exceed the container size, the search option becomes hidden. My goal is to have the search bar adjust dynamically, moving everything back inside the ...

jqueryhtmlcss

What is the best way to create a fading footer effect on scroll using jQuery?

Why is my footer not fading in after 1000px like I want it to? Instead, it appears immediately on the screen. I attempted using fadeIn() in jQuery but had no luck. I also tried to make it disappear with fadeOut(), again with no success. Am I missing someth ...

javascripthtmljquerycssfooter

The width of an HTML input and button elements do not match

Currently, I am facing an unusual issue where my input and button tags seem to have the same width assigned to them (width: 341.5px; calculated from $(window).width() / 4) in the code, but visually they appear to be of different widths. Here is a visual re ...

javascriptjqueryhtmlcss

In my development environment, the page does not have scroll functionality, but in the production environment, it is scrollable

Whenever I open a table or any other element with overflowing content, I encounter an issue with the scrolling bar. Even though the CSS includes overflow-y: scroll;, the scroll bar on the right remains in gray and does not allow me to scroll down when the ...

javascriptcssvue.jsfrontendvuetify.js

Can anyone provide a reference or resource that explains the best scenarios for utilizing display:block, display:inline, and display:inline-block, and the reasons behind their usage?

Can you recommend a quality article discussing the guidelines for using display:block, :inline, and :inline-block in CSS, along with explanations on when to utilize each one? Additionally, in what scenarios should we override the display property through ...

cssxhtmlsemantic-markup

The image will only display upon receiving a link, not a path

Having some trouble displaying an image on my website, despite having successfully done so in the past for other projects. The image is located in the same folder as my HTML file. Here's what I've tried: <img src="reddit.png"/> <img s ...

javascripthtmlcssreactjsbootstrap-4

Styling with CSS 3: Adding Shadows and Rounded Edges

Encountered an intriguing discovery and I'm hoping you can shed some light on it. Here's the code in question: width:940px; margin:0 auto; padding:13px 29px 39px 31px; background:#fff; -webkit-border-radius:10px; -moz-border-radius:1 ...

css

Position a button and input element in alignment

I recently decided to challenge myself by recreating the Netflix registration page as a practice project. Using the flexbox model on the webpage, I encountered an issue with aligning the email input and the "Get Started" button. Despite trying different me ...

htmlcssflexbox

After checking the checkbox to add a class, I then need to remove that class without having to interact with the entire document

When I click on a checkbox, an animation is added to a div. However, I am struggling to remove this animation unless I click elsewhere on the document. The goal is for the checkbox to both add and remove the class. JS $('#inOrder').click(functi ...

javascripthtmljquerycss

What is the best method to obtain the following id for an image?

Whenever I hover over the li with the number 3, I am getting the wrong number for the next id in the img tag. The first time, I get next id = 4 which is incorrect. But on the second hover, I get next id = 0 which is what I actually need. How can I correctl ...

javascripthtmljquerycsscarousel

Does applying a style to an element that already has the same value result in a decrease in performance? Alternatively, do all browsers simply overlook it?

Assuming I have an element with the style top: 5px, and then I execute element.style.top = "5px";, will the browser readjust its position and trigger a layout again? Or does it recognize that there is no need to change anything? (Is this behavior specified ...

javascriptjquerycsshtml

Dropdown arrow on triangle point not appearing correctly

My goal is to create enough space between the parent and dropdown menu using a triangle shaped pointer. This is what I am aiming for: This is what I have achieved so far: The CSS code for the triangle shape: .sf-menu ul li:first-child a:after { c ...

htmlcss