The rangeslider thumb is positioned incorrectly on the track in the Firefox browser. How can this issue be resolved? Please see the code provided

Hey there, I am currently facing an issue with the compatibility of a range slider on different browsers. While it works perfectly on Chrome and Safari, Mozilla browser does not seem to support it. I have been trying my best to resolve this problem without any luck so far.

input[type=range]:nth-child(1)::-moz-range-thumb {
  background-color: blue;
  z-index:999;
}
input[type=range]:nth-child(2)::-moz-range-thumb {
  background-color: green;
 
}
input[type=range]{
  position:absolute;
}
<input type="range" min="0" max="100" step="5" value="20"/>
<input type="range" min="0" max="100" step="5" value="90"/>

csshtml

Answer №1

Check out this resource for styling input type range elements in different browsers:

Use ::-moz-range-thumb for Firefox.

Use ::-webkit-slider-runnable-track for Chrome, Safari, and Opera.

Use ::-ms-thumb for Internet Explorer 10 and above.

Avoid this:

input[type=range]{
  position:absolute;
}


input[type=range]:nth-child(1)::-moz-range-thumb {
  background-color: blue;
  z-index:999;
}
input[type=range]:nth-child(2)::-moz-range-thumb {
  background-color: green;

}

 input[type=range]:nth-child(1)::-webkit-slider-runnable-track {
  background-color: blue;
  z-index:999;
}
 input[type=range]:nth-child(2)::-webkit-slider-runnable-track {
  background-color: green;

}
input[type=range]:nth-child(1)::-ms-thumb{
  background-color: blue;
  z-index:999;
}
input[type=range]:nth-child(2)::-ms-thumb {
  background-color: green;

}
<input class="range1" type="range" min="0" max="100" step="5" value="20"/>
<input class="range2" type="range" min="0" max="100" step="5" value="90"/>

Answer №2

input[type="range"] {
 cursor: not-allowed;
}

input[type=range]::-moz-range-thumb 
{
 z-index: 10; 
 cursor: pointer;
}

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

Updating an HTML value based on the selected option using JavaScript

I'm working on a form that included a select element: <select class="form-control"> <option>10 pc</option><!--1 USD --> <option>20 pc</option><!--2 USD --> <option>50 pc</option><!--3 USD ...

javascriptjqueryhtml

Is it possible to store Json data in a value attribute to showcase it in a form?

JSON data is coming to me and I need to input it into a text box for editing purposes. Here's an example: <div class="form-group"> <label class="control-label col-sm-2" for="email">Email:</label> <div class="col-sm-10"&g ...

htmljson

Maximizing the efficiency of Java Script code

I am struggling with optimizing this JavaScript code that adds and removes classes based on the presence of a specific class in the next rows of a table. Can anyone provide some guidance on how to make this code more efficient? $(".showTR").click(functi ...

javascripthtmlcss

Having difficulty selecting an element using XPath based on its title

https://i.stack.imgur.com/Of29v.png My XPath: ((//span[text()='Number of Allowances'])/../../../following::div//table[@class='mainTable']//tr[1]//input[@data-automation-id="numericInput"]) The XPath above clearly specifies that the ai ...

javahtmlxpathselenium-webdriver

The sign out option fails to erase the data stored in Local Storage

After implementing a login feature that stores a token in local storage, I encountered an issue with the logout button. The intention was for the button to delete the token from local storage and set the user to null upon clicking it. However, this functio ...

htmlangulartypescript

Issues with Jquery/AJAX function not responding to onChange Event

I am currently working on a project where I need to populate a dropdown menu based on the value selected from another dropdown. However, I am encountering an issue with the function that I am trying to call in the onChange event of the select tag. This is ...

javascriptjqueryhtmlajax

How can I create additional white space at the end of my webpage with CSS grid?

Looking for some help with CSS as a beginner here. I'm facing an issue where my CSS is creating excessive blank space at the bottom of my document, almost 60% of it. Could this be due to incorrect parent parameters or the children elements? This is m ...

htmlcsscss-grid

Include a border around the list items within two separate columns

I am trying to create 2 columns using li and want to add borders to each of them. However, I'm facing an issue where there are double borders for 2 li. This is the code snippet I have tried: .ul1 { column-count: 2; column-gap: 0px; } .li1 ...

htmlcsscss-selectors

Capable of retrieving response data, however, the label remains invisible in the dropdown menu

Upon selecting a country, I expect the corresponding city from the database to be automatically displayed in the dropdown menu. While I was able to retrieve the state response (as seen in the console output), it is not appearing in the dropdown menu. Inte ...

htmlangulartypescriptdrop-down-menu

Choose <a role="button"> over <button> for a better user experience

When testing my website for accessibility with the NVDA program, I discovered a way to make links behave like buttons by using an attribute called role="button". According to MDN Web Docs and Bootstrap 4 documentation: links should have a role="button" ...

htmlaccessibility

What is the best way to utilize flex for resizing items proportionally?

Within the following script, I am emulating a stepper using row and col. It appears satisfactory. Nevertheless, when the page is viewed on wide screens (such as lg and xl), the spacing between the steps is excessive. Essentially, the stepper occupies the ...

htmlcssbootstrap-4

Encountering a Tailwindcss error while attempting to compile the CSS file

Struggling to grasp Tailwind CSS as I try to compile the CSS but keep encountering errors. Despite following numerous tutorials, this persistent error continues to hinder my progress. This is the specific error message that keeps popping up: $ npm run bui ...

cssframeworkstailwind-css

React Material-UI select component malfunctions when I enclose the menu item within a Tooltip wrapper

Here is a snippet of my code: return( <FormControl sx={{ m: 1, minWidth: 80 }}> <InputLabel id="demo-simple-select-autowidth-label">Age</InputLabel> <Select labelId="demo-simple-select-autowidt ...

javascripthtmlreactjsmaterial-ui

Linking Two HTML Components in Angular 4 with Identical Values

Recently, I've started working with Angular and encountered an issue. In a table row, the value item.md_id is bound like this: <tr *ngFor="let item of driverData"> <td class="align-right" id="md_id" [(ngModel)]="item.md_id" name="driverId ...

javascripthtmlangular

Submitting hidden values and multiple values with checkboxes in HTML

Is there a way to link multiple form fields with one checkbox for submission? For example: <input type=hidden name=code value="cycle_code" /> <input type=checkbox name=vehicle value="cycle" /> <input type=hidden name=code value="car_code" ...

javahtmljspcheckbox

Could this be the most straightforward and versatile method for vertically centering text inside a block element?

Discovering something new in the world of coding is always exciting: HTML: <div>Vertically Centered Text<span></span></div> CSS: div { height: 100px; /* adjust as needed */ } div > span { display: inline-block; v ...

csslayoutxhtmlhtml

PHP and MySQLi for inserting records into database

Currently, I am attempting to retrieve user input values from a form and store them in a database using PHP. Below is the contents of my dbConfig file: <?php $mysqli = new mysqli("localhost", "root", "password", "testDB"); /* checking connecti ...

phphtmlmysqli

Having issues with the Jquery tablesorter plugin when attempting to prevent headers from being sorted

Can anyone help me with a sorting issue I am having with a table on my website? I am using the jQuery plugin tablersorter to sort the table, but I have two headers that I do not want to be sortable. I tried to disable them using the example provided on the ...

javascriptphpjqueryhtmltablesorter

Is it more effective to be precise when choosing IDs in CSS?

If you have a unique identifier on a div element called main, how should you reference it in CSS - with div#main or just #main? What is considered best practice? Considering that only one element can have a specific id, using div#main essentially duplicat ...

htmlcsscss-selectors

Most Effective Method for Switching CSS Style Height from "0" to "auto"

After coming across a question with no answer that suited my needs, I decided to share the solution I created. In my case, I had a hidden generated list on a page which was initially set with a CSS height of "0" and then expanded upon clicking by transit ...

javascripthtmljquerycssperformance