Strategies for addressing input range slider cross browser compatibility issues

I have encountered an issue with the slider track while using a customized range slider with CSS. For Mozilla, I utilized the selector for progress (-moz-range-progress) and for IE I used -ms-filler-lower and -ms-filler-upper.

Although it works well for both browsers, I am struggling to find a solution for Chrome using Webkit. This prevents me from changing the color of the track based on the position of the slider thumb.

CSS:

body {

  color: red;
  font-family: "HelveticaNeue", "Helvetica Neue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: normal;
  margin: 0;
}

header {

  background-color: white;  
  padding: 60px 40px;
}


h1 {
  font-size: 200%;
}

h3 {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: normal;
}

p {
  font-size: 90%;
  font-weight: normal;
}

article {
  -webkit-column-count: 4;
  column-count: 4;
}

p {
  margin: 0px;
}

/**
 * Text Slider Directive - CSS  
 **/
.text-size-slider {
  line-height: 100%;
  font-size: 14px;
  position: relative;
}

.text-size-slider .small-letter,.text-size-slider .big-letter
{
  font-weight: bold;
}

.text-size-slider .slider {
  -webkit-appearance: none;
  margin: 0 8px;
}

.text-size-slider .slider:focus {
  outline: none;
}

.text-size-slider .slider::-webkit-slider-thumb {
  border: none;
  cursor: pointer;
  -webkit-appearance: none;
  background-color: rgba(192, 35, 74, 1);
  width: 15px;
  height: 15px;
  border-radius: 50%;
  margin-top: -6px;
}
.text-size-slider .slider::-moz-range-thumb {
  border: none;
  cursor: pointer;
  -webkit-appearance: none;
  background-color: rgba(192, 35, 74, 1);
  width: 15px;
  height: 15px;
  border-radius: 50%;
  margin-top: -6px;
}

.text-size-slider .slider::-webkit-slider-thumb::before {
 content:"YEAH";
 display:block;
 background:rgba(192, 35, 74, 1);
 height:20px;
 width:20px;
 position:absolute;
 top:-20px;
 left:-10px;
}
.text-size-slider .slider::-moz-range-thumb::before {
 content:"YEAH";
 display:block;
 background:rgba(192, 35, 74, 1);
 height:20px;
 width:20px;
 position:absolute;
 top:-20px;
 left:-10px;
}

.pointer {
    vertical-align:top;
  height: 40px;
  width: 40px;
  border-radius:20px 20px  0 20px;
  background-color:rgba(192, 35, 74, 1);
  display:block;
  transform: rotate(45deg);
  position:absolute;
  top: -46px;
  margin-left:13px;

  color:black;

}

.pointer span {
  display: inline-block;
  transform: rotate(-45deg);
  margin-left:12px;
  margin-top: 14px;
  color:white;


}
.gray-line {

  position: absolute;
  height: 2px;
  background-color: grey;
  top: 17px;
  width: 20px;

}

.text-size-slider .slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 2px;
  cursor: pointer;
  background: linear-gradient(90deg, red, brown) 0 100% no-repeat content-box;
  border: 0;
}

.text-size-slider .slider::-moz-range-track {
  width: 100%;
  height: 2px;
  cursor: pointer;
   background-color: grey;
  border: 0;
}
.text-size-slider .slider::-moz-range-progress {
  background-color: rgba(192, 35, 74, 1); 
}
.text-size-slider .slider::--webkit-slider-runnable-progress {
  background-color: rgba(192, 35, 74, 1); 
}
.text-size-slider .slider:-webkit-fill-lower {  

  background-color: blue;

}

Check out the plunker for a live demo: https://plnkr.co/edit/ecU8KvlO2jWGWy4jVAcS?p=preview

Expected result:

https://i.sstatic.net/8SF3r.png

Answer №1

After conducting some research, I discovered that there is no CSS property equivalent to achieve the desired behavior.

I considered adding an ::after element on the ::-webkit-slider-thumb, but unfortunately, Chrome does not support this due to a resolved issue on Chromium which has been marked as "won't fix." It appears that the feature (or bug) that allowed this has been removed.

So, what options are there without relying on JavaScript?

One suggestion from a related question proposes the following solutions:

Pure CSS approach:

For Chrome: Conceal the overflow of input[range] and use a shadow color to fill the space left to the thumb.

For IE: Utilize the existing feature: ::-ms-fill-lower

For Firefox: Utilize the existing feature: ::-moz-range-progress

Implementing these solutions in your code would result in something similar to the following:

@media screen and (-webkit-min-device-pixel-ratio:0) {
  input[type='range'] {
      overflow: hidden;
      background-color: #9a905d;
    }
  .text-size-slider .slider::-webkit-slider-thumb {
    border: none;
    cursor: pointer;
    -webkit-appearance: none;
    background-color: blue;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    box-shadow: 80px 0 0 80px gray;
    margin-top: -6px;
  }

}

However, you may notice that the slider's ::thumb is no longer round but now extends to the full height of the slider. This is due to the overflow being hidden and a box-shadow being added to the right side to achieve different colors on each side. Unfortunately, this also hides the ::thumb on the Y-axis.

Considering the limitations of CSS, the next step is to consider a JavaScript solution. In the same referenced question, there is a JavaScript solution that I have provided an updated version for here.

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

Update the path dynamically in Next.js without the need to reload the page

Every time the user clicks on the continue button, a function is triggered. Within that function, I make the following call: push("/signup/page-2", undefined, { shallow: true }); All dynamic routes resembling /signup/[page].js that return <Component / ...

Are there alternative methods for anchoring an element in Vuetify aside from using the v-toolbar component?

I have been working on positioning certain elements in the app and I have found a method that seems to work, using code like this: <v-toolbar fixed></v-toolbar> Another option is something along these lines: <v-toolbar app></v-toolb ...

Having trouble with setting up ENV variables while deploying the app on Heroku

I recently deployed my node.js app to Heroku, and I'm facing some issues with its functionality. The app loads fine, but when I try to sign in, it breaks down. It seems like the environment variables are not loading correctly, specifically the db vari ...

"Resolving the duplication issue of a textbox in Phonegap app

I encountered a strange issue recently. While trying to focus on the textbox in my PhoneGap application using touch, I noticed that there are actually 2 textboxes appearing. Please refer to the attached image: ...

The function window.location.reload(true) is failing to properly refresh the page

Currently, I have a PHP page that retrieves data from a MYSQL database and creates HTML content based on the returned rows. I recently implemented a feature where clicking a button adds a new row to the database using AJAX, jQuery, and PHP. However, after ...

Tips for setting up the Top Menu and Left Side Menu in your system

You're looking to incorporate both the Top Menu and Left Side Menu. The top menu should remain fixed at the top of the page. Implementing the Left Side Menu below the Top Menu has been a challenge. It's currently covering the top menu, which is ...

Customize the velocity of your jQuery Cycle plugin's horizontal slider

Currently, I am utilizing the jQuery Cycle plugin to design a basic slideshow. Here is the corresponding script: $(document).ready(function() { var slideshow = $('#slider').cycle({ fx: 'scrollHorz', speed: 500, timeout: ...

Can different versions of Node be used simultaneously for various Node scripts?

Currently, I am utilizing nvm. Can a specific node version be used for a particular script? For instance... Using node 6 forever start -a -l $MYPATH/forever.log -e $MYPATH/err.log -c "node --max_old_space_size=20" $MYPATH/script_with_node_version_6.js U ...

Integrating custom non-NPM JavaScript files into Angular 2

Currently, the application I am working on is running in an environment with angular 2.0.0 final using typescript and also utilizes angular-cli 1.0.0-beta.15. Since the development of the application involves multiple developers who all use typescript, I ...

No matter what I try, the design of my dialog box remains stubbornly unchanged

I am attempting to increase the width of my dialog box while also adding horizontal middle borders. It seems that my bootstrap for the site does not include these elements. How can I rectify this issue? Here is my code: $(document).ready(function() { ...

Guide on incorporating interactive visuals or features within a panoramic image viewer through the use of THree.js and webGL

Seeking advice on how to incorporate more images and hyperlinks within a panoramic viewer, similar to the examples below: This particular link Panorado js viewer. I have noticed that these viewers feature embedded hyperlinks and overlays, I have attempt ...

Get the value of the button that has been clicked

I have a query regarding building a website that can be started via PowerShell. The PowerShell HTML code I am using is: $proxys = "" foreach ($email in $ADObj.proxyAddresses){ $proxys += "<button id='$email' name='alias&apo ...

Using Django to populate one dropdown select option based on the selection made in another

In my own unique environment, I have attempted to implement the concept detailed above, albeit with scattered documentation. Unfortunately, I am facing challenges in getting it to function correctly. The current state of affairs is such that the web page o ...

Having issues with the submit button functionality on Laravel Crud when employing Ajax and jQuery

I have been experiencing an issue with submitting the form after completing all the fields. Despite filling out the form and trying to submit it, I am not able to do so and there are no error messages appearing in the console or network tab either. Here i ...

Struggling to find multiline content in a SWIFT message using regex

Looking into a SWIFT message using RegEx, here is an excerpt: :16R:FIN :35B:ISIN CH0117044708 ANTEILE -DT USD- SWISSCANTO (CH) INDEX EQUITY FUND USA :16R:FIA The goal is to extract information in group 3: ISIN CH0117044708 ANTEILE -DT USD- SWISSCANTO (C ...

Encountered a permission denial error (101) while attempting to upload a file to an SFTP server using SSH2 in

Encountering a permission denied error when attempting to upload a file to an SFTP server, whereas the same operation succeeds when using FileZilla. const UploadFiletoFTP = () => { let Client = require('ssh2').Client; var connSetti ...

Determine the orientation of the object relative to the camera in threejs

I am currently facing a scenario where I need to determine the direction of an object in relation to the camera. While I have methods for detecting if an object is within the camera's view, I am now tasked with determining the directions of objects th ...

Tips for managing NaN values within mathjs.evaluate

console.log(mathjs.evaluate("(goodCount/(goodCount+reject_count))>0.99", { goodCount: 0, reject_count: 0, Total_Planned_time: 10 })) I am facing an issue where if both goodCount and reject_count are zero, this function returns NaN. Howe ...

Could you please replace the text with {} symbol in Jerry?

Below is the code snippet: <p> To <br> {customerDetails} </p> I attempted to modify it but encountered an error. Jerry doc = Jerry.jerry(FileUtil.readString(fi ...

The range filter is exclusive to the initial controller

My range filter (see code below) is only working on my first controller. I have added the same filter to other controllers in the app.js and HTML, but it's not functioning for some reason. I checked the console for errors, but there are none. Here i ...