Ensure the styling for the Range HTML Input Type is consistent and functional on both Chrome and Internet Explorer

I am facing an issue where the styling of a range type input field in my code is not compatible with IE11.

try.html

<div class="footer">
    <div class="row justify-content-center">
        <div class="container">
        <input class="range" type="range" min="0" max="100">
        </div> 
    </div>
</div>

style.css

.slider{
  -webkit-appearance: none;
  width: 100%;
  padding: 0;
  height: 3px;
  opacity: 1;
  background: #d3d3d3;
}
.slider::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  border:3px solid #6452d6;
  border-radius: 25px;
  background-color: white;
  width: 55px;
  height: 20px;
}

While the design displays correctly in Chrome, IE11 fails to render it properly. How can I ensure that it appears as intended in IE11?

htmlcss

Answer №1

Take a close look at my code, make sure to include the MS filler.

body {
    padding: 30px;
}
input[type=range] {
    /*removes default webkit styles*/
    -webkit-appearance: none;
    
    /*fix for FF unable to apply focus style bug */
    border: 1px solid white;
    
    /*required for proper track sizing in FF*/
    width: 300px;
}
input[type=range]::-webkit-slider-runnable-track {
    width: 300px;
    height: 5px;
    background: #ddd;
    border: none;
    border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: goldenrod;
    margin-top: -4px;
}
input[type=range]:focus {
    outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
    background: #ccc;
}

input[type=range]::-moz-range-track {
    width: 300px;
    height: 5px;
    background: #ddd;
    border: none;
    border-radius: 3px;
}
input[type=range]::-moz-range-thumb {
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: goldenrod;
}

/*hide the outline behind the border*/
input[type=range]:-moz-focusring{
    outline: 1px solid white;
    outline-offset: -1px;
}

input[type=range]::-ms-track {
    width: 300px;
    height: 5px;
    
    /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
    background: transparent;
    
    /*leave room for the larger thumb to overflow with a transparent border */
    border-color: transparent;
    border-width: 6px 0;

    /*remove default tick marks*/
    color: transparent;
}
input[type=range]::-ms-fill-lower {
    background: #777;
    border-radius: 10px;
}
input[type=range]::-ms-fill-upper {
    background: #ddd;
    border-radius: 10px;
}
input[type=range]::-ms-thumb {
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: goldenrod;
}
input[type=range]:focus::-ms-fill-lower {
    background: #888;
}
input[type=range]:focus::-ms-fill-upper {
    background: #ccc;
}
<div class="footer">
  <div class="row justify-content-center">
      <div class="container">
      <input class="range" type="range" min="0" max="100">
      </div> 
  </div>
</div>

Include MS fillers as shown below:

input[type=range]::-ms-track
input[type=range]::-ms-thumb
input[type=range]::-ms-fill-upper
input[type=range]::-ms-fill-lower

For additional details, visit this JSfiddle link

This should provide the assistance you need. :)

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

Use checkboxes to switch specific divs on and off based on their two assigned classes

Hey, I'm trying to implement some code with a specific structure: Initially, a main div is opened and checkboxes are created using a foreach loop. A checkbox is generated for each 'model' in an array. <div id='coltext'> & ...

phpjavascriptjquerycss

The Vue component appears to be missing from the HTML code

I recently began learning Vue.js in school, and for my first assignment I need to print a h2 from a Vue component. However, I am having trouble getting it to work. Below is the code for the Vue component that I have created. var app = new Vue({ ...

javascripthtmlvue.js

What is the best way to update the content of a text area using PyScript?

Currently, I am in the process of developing a program that involves entering text, clicking a button, processing it, and then displaying the output on a textarea. However, I'm faced with an issue where the textarea fails to update as expected. I woul ...

htmltextareapyscript

Change the timestamp 2017-09-12 00:00:00 to just 2017-09-12 with the help of Angularjs

When pulling data from the database, the date is showing up as 2017-09-12 00:00:00. How can I format it to only display as 2017-09-12? ...

angularjshtml

The event listener is failing to trigger the JavaScript function upon click

I am experiencing an issue with an onClick listener triggering an AJAX call to a PHP script. It seems that the click is not being recognized. Any suggestions on what could be causing this? Index.html <html> <head> <script src="//ajax.googl ...

phphtmlajax

Angular's Validator directive offers powerful validation capabilities for reactive forms

Referenced from: This is the approach I have experimented with: custom-validator.directive.ts import { Directive } from '@angular/core'; import { AbstractControl, FormControl, ValidationErrors } from '@angular/forms'; @Directive({ ...

htmlangulartypescript

Utilizing a mathematical equation stored in JSON within a JavaScript environment

I'm in the process of creating a conversion calculator and I want to save the formulas and references in JSON format. Unfortunately, I'm uncertain on how to interpret the variable as a mathematical operation. JSON var JSON = { "conversio ...

javascripthtmljson

Ensure that all `thead th` elements remain in a fixed/sticky position when using a data

I am facing an issue with my data table requirement. I need to have 2 thead elements in the table, both of which should stick when scrolling. However, only the last thead's tr stays stuck at the top while the first one gets hidden. Can anyone help me ...

htmlcss

Discovering the window scroll unit when clicking, as a page smoothly transitions to the top for a specified target position

Is there a way to achieve parallax scrolling on window scroll and navigation click simultaneously? When navigating and animating the page to the top to show the target, I also want to get the window scroll unit. How can I obtain the window scroll unit on ...

javascriptjqueryhtmlcss

Clearing data in a JQuery DataTable after loading it with PHP

Once the table is loaded with data, it seems to clear the information after a few milliseconds and displays a row with the message "No matching records found" https://i.sstatic.net/UPEwC.gif HTML Code <table id="table"> <thead> & ...

htmljquerybootstrap-4datatable

Alert: mssql_execute() encountered an issue and was unable to locate the stored procedure

Despite spending nearly a day trying to solve this issue, I am still unable to find a solution. I am encountering a problem with an MSSQL procedure in PHP. I have a form with 5 fields that calculate an "Amount." The procedure works perfectly in SQL Managem ...

phphtmlsql-serverwordpress

Utilize identical animations across various elements

I have a canvas animation in JavaScript that is currently limited to one canvas element with the id "stars". I want to be able to use this animation multiple times without repeating the code. Is there a way to add a class for the canvas elements instead of ...

javascripthtmlcsscanvas

What is the method for enclosing the Font Awesome addition symbol within a bordered box to create the appearance of a button?

Here is a sample HTML code: <div id="menu-icon"> <div><i class="fa fa-plus fa-lg"></i></div> </div> And this is the corresponding CSS: #menu-icon { height: 45px; width: 45px; background-color: #A3D8D4; ...

htmlcss

Is it possible to apply CSS animations to manipulate HTML attributes?

I'm exploring how to animate an HTML element's attribute using CSS and looking for guidance. While I am aware that you can retrieve an attribute using the attr() CSS function, I am unsure about how to modify it. Specifically, I am attempting to ...

javascripthtmlcssattributescss-animations

Is the condition failing to evaluate for all td elements?

I am currently dealing with an HTML table. When I select a checkbox, I aim to compare the values of the cells in each row. This comparison works correctly for the first row, but it does not work for any subsequent rows. HTML Code - <form role="fo ...

javascripthtmljqueryif-statementconditional-statements

The requested style from ' was denied due to its MIME type ('text/html') not being compatible with supported stylesheet MIME types, and strict MIME checking is enforced

It's strange because my style.css file in the public folder works on one page but gives me an error on another. I'm not sure why it would work on one page and not on the other. The CSS is imported in index.html so it should work on all pages of t ...

javascriptcssreactjsnode.jsreact-router

Media publications do not conform to the current trends

I'm currently utilizing the HTML-to-paper plugin to print my content on a printer. However, I've encountered an issue where it doesn't seem to apply any of the styles I've defined within @media print. The challenges I'm encounteri ...

javascriptcssvue.jsmedia-queries

The white-spaces in Quill JS do not retain their original formatting

I recently integrated Quill JS editor into my website. During testing, I noticed that any text inputted after a white space gets emitted when alerting the content. Below is the HTML code snippet: <div id="postCommentEditor" class="postCo ...

javascripthtmlcssquill

Enhance the <div> with interactive content through dynamic updates on click within the same element

I am currently developing an Editor-Menu for a website administration. When I open admin.php, the Editor-Menu should be loaded into the #ausgabe div using the code $('#ausgabe').load('./admin-ajax/ajax2.php'). This functionality is work ...

javascriptjqueryhtmlajax

Difficulty arises when collapsed text in Bootstrap clashes with the footer design

Hey there! I'm working on this website using Bootstrap, and I've encountered a problem. When you click the "See Wikipedia" button, the content expands and overlaps the footer in a strange way without changing the page height. I've tried adju ...

javascripthtmlcsstwitter-bootstraptwitter-bootstrap-3