Adjust the background of the input range style prior to the thumb icon

Is there a way to style the bar before the thumb with a different color on a range input? I have been searching for a solution without much success. This is the desired look: https://i.sstatic.net/ZkTAB.png

Unfortunately, Chrome no longer supports

input[type='range']::-webkit-slider-thumb:before
, leaving me unsure of how to proceed with styling. Here's what I have attempted so far:

input[type='range'] {
    min-width: 100px;
    max-width: 200px;

    &::-webkit-slider-thumb {
        -webkit-appearance: none !important;
        background-color: @white;
        border: 1px solid @gray-4;
        height: 14px;
        width: 14px;

        &:hover,
        &:focus,
        &:active {
            border-color: @blue;
            background-color: @gray-2;
        }
    }

    &::-webkit-slider-runnable-track {
        background-color: @gray-2;
        border: 1px solid @gray-4;
    }
}

Answer №1

document.querySelectorAll(".__range").forEach(function(el) {       
  el.oninput =function(){            
  var valPercent = (el.valueAsNumber  - parseInt(el.min)) / 
                      (parseInt(el.max) - parseInt(el.min));
    var style = 'background-image: -webkit-gradient(linear, 0% 0%, 100% 0%, color-stop('+ valPercent+', #29907f), color-stop('+ valPercent+', #f5f6f8));';
    el.style = style;
  };
  el.oninput();
});
.__range{
  margin:30px 0 20px 0;
  -webkit-appearance: none;
  background-color: #f5f6f8;
  height: 3px;
  width: 100%;
  margin: 10px auto;
}
.__range:focus{
  outline:none;
}
.__range::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  background: #29907f;
  border-radius: 50%;
  cursor: -moz-grab;
  cursor: -webkit-grab; 
}
<input class="__range" id="rng" name="rng" value="30" type="range" max="100" min="1" value="100" step="1">        

Answer №2

The method discussed in the post mentioned by shambalambala is quite clever, however, I have doubts about its effectiveness in replicating the exact image shown. The concept involves adding a shadow to the thumb element to achieve different coloring on the left side of the thumb. This technique requires adding overflow:hidden to either the range or the track to clip the shadow effect. Unfortunately, this clipping also affects the thumb. Therefore, if you desire a thumb that extends beyond the track vertically, as seen in the image where the thumb is a circle with a diameter larger than the track width, this approach may not be suitable.

It seems challenging to find a purely CSS-based solution for this issue. A potential workaround using JavaScript involves creating two overlapping range elements. One would display only the thumb while the other shows only the track. By applying the shadow effect to the track element, you can achieve the desired color differentiation before the thumb. The thumb appearance on the visible range can be customized without setting overflow: hidden, allowing it to extend beyond the track width. Through JavaScript, you can synchronize the values of both range elements so that moving the thumb on one reflects changes on the other.

Below is an example code snippet (optimized for webkit browsers—additional styling might be needed for other browsers):

<html>
  <head>
  
  <style>

  .styled_range {
    position: relative;
    padding: 10px;
  }

  input[type=range] {
    -webkit-appearance: none;
    width: 600px;
    background: transparent;
    position: absolute;
    top: 0;
    left: 0;
  }

  input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
  }

  input[type=range]:focus {
    outline: none;
  }

  input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 12px;
  }

  .track_range {
    pointer-events: none;
  }

  .track_range::-webkit-slider-runnable-track {
    background: #D0D0D0;
    border-radius: 6px;
    overflow: hidden;
  }  

  .track_range::-webkit-slider-thumb {
    -webkit-appearance: none;
    background: transparent;
    height: 1px;
    width: 1px;
    box-shadow: -600px 0 0 600px #666666;
  }

  .thumb_range::-webkit-slider-runnable-track {
    background: transparent;
    cursor: pointer;
  }

  .thumb_range::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: 3px solid #ffffff;
    border-radius: 20px;
    height: 40px;
    width: 40px;
    background: #1180AD;
    cursor: pointer;
    margin: -12px 0px 0px 0px;
  }


  </style>
  </head>
  <body>
    <form>
    <div class="styled_range">
      <input type="range" class="track_range"/>
      <input type="range" class="thumb_range"/>
    </div>
    <br/>
    <div class="styled_range">
      <input type="range" class="track_range"/>
      <input type="range" class="thumb_range"/>
    </div>
    </form>
  </body>

  <script>

  window.onload = function() {
    var styledRanges = document.getElementsByClassName('styled_range');
    for (var i=0; i<styledRanges.length; i++) {
      var thumbRange = null, trackRange = null;
      for (var j=0; j<styledRanges[i].children.length; j++) {
        var child = styledRanges[i].children[j];
        if (child.className === 'thumb_range')
          var thumbRange = child;
        else if (child.className === 'track_range')
          var trackRange = child;
      }
      thumbRange.oninput = function(thumbRange, trackRange) {
        return function(e) {
          trackRange.value = thumbRange.value;
        };
      }(thumbRange, trackRange);
    }
  }


  </script>
</html>

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

View the image without needing to upload it

Can you display an image from an input type="file" on a page without actually uploading it to the server? Is there a way to copy the image into a location that the script can access in order to achieve this? It doesn't matter if it loads after a refr ...

Comparison of Foundation5 source ordering: main content versus sidebar

I recently set up a layout with three columns using ZURB Foundation 5. The two sidebars are on the left and right, while the main content area is in the middle. While trying to follow the source ordering instructions in the documentation, I encountered so ...

The JQuery .change() event behaves inconsistently in Internet Explorer and Firefox, firing at varying times in each

I am looking to retrieve the checked state of a checkbox after it has been toggled. Whenever I click on the checkbox or press enter in my "search text box", it should change the checkbox's checked state and then display the updated value. My code work ...

Creating a text shadow effect with text that has a transparent color

I am attempting to replicate the design shown below using the CSS text-shadow property, but I keep getting a solid color outcome. I have tried using an rgba value of 255,0,0,0.0 for the font-color and text-shadow like this: text-shadow: -1px -1px 0 #0 ...

Finding elements based on their position using Javascript

I'm searching for an optimal method to identify all elements located within a specific range of pixels from the top of the page. Currently, I have implemented a straightforward test called inRange function inRange(el, from, to) { var top = el.offs ...

Sending a post request with data to an ExpressJS server resulted in a 404 error indicating that the server

My setup includes a React frontend communicating with my own ExpressJS API backend running version 4.16.0. Currently, using the fetch method in the React frontend to retrieve data is functioning properly: fetch('/desResData') .then(res = ...

Discovering the technique to unearth a specific value within an array nested within another array

I am encountering an issue with finding a value in one array inside another array and utilizing the resulting value to update the state using setState(). Here is the initial state: this.state = { initialStudents:[ {name:"str1",tags;["str","s ...

Using SVG graphics as data labels in a HighChart stacked column chart

I am attempting to generate a stacked column chart in Highcharts with SVG images as x-axis labels, similar to the image displayed here: https://i.stack.imgur.com/y5gL1.png I have managed to achieve this with individual data points per label (non-stacked ...

Error: ajax is not defined and needs to be declared (repeated twice)

Currently, I have a form that requires processing using Ajax. <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <div class="column1"> <form class="form box" action="javascript:networkCheck();" ...

No space left around the image's border

Whenever I apply a border to an image, it comes with a margin and the image itself receives white padding. How can I remove the margin from the border? This is how I currently have it: border: 1px solid gray; ...

Get the color at a specific index in a JavaScript array

When I click a button, a pie chart is generated using chartjs. The results are displayed based on the filters applied, showing (Name | Value%): Service_1 | 10 Service_2 | 15 Service_3 | 75 Sometimes, certain results may not appear: Service_1 | 20 S ...

How can you disable an 'option' HTML5 element using the AngularJS methodology?

How can I disable an 'option' element in HTML5 using AngularJS? Currently, I am working with AngularJS v1.2.25. Here is the Plunk Link for reference: https://plnkr.co/edit/fS1uKZ <!-- CODE BEGIN --> <!DOCTYPE html> <html> ...

The value of an AngularJS service is not being reflected in the view

I have implemented the stateProvider in my code, and I am facing an issue with updating the breadcrumbs in the header when the state changes. Instead of creating embedded views for each state, I have a service that shares an array of breadcrumbs containing ...

Mastering the Art of Modifying HTML with Node.js

Is it possible to manipulate HTML using Node.js? 1. First, I need to retrieve data from a database. 2. Then, I need to modify or add HTML code within Node. In essence, the goal is to fetch data and integrate it into an HTML file. The JavaScript snippet ...

Utilizing JavaScript to exchange "unprocessed" Apple Events on OS X (El Capitan)

I'm exploring the new JavaScript Automation feature in OS X (10.11) to automate a specific application that lacks a dictionary. My current approach involves using AppleScript with raw Apple Events as follows: tell application "Bookends" return «ev ...

When data is stored in Internet Explorer's cache, any changes made are not being reflected in

Internet Explorer stores data in cache and even if there are changes, it may not reflect onclick. However, when I open the developer mode and try to access the same, then it works perfectly. This issue only seems to occur in IE as all other browsers work f ...

Utilizing Axios recursion to paginate through an API using a cursor-based approach

Is there a way to paginate an API with a cursor using axios? I am looking to repeatedly call this function until response.data.length < 1 and return the complete array containing all items in the collection once the process is complete. Additionally, I ...

Issue with deleting data from database using the script

I am facing an issue with deleting records using a button on the Index webpage. I tried using jQuery with AJAX, but it does not seem to be working correctly. Here is my controller method which works fine when called from a form generated by another page u ...

"Hidden panels in Sencha Touch only respond to show() and hide() methods after a resize event

Check out this demonstration of a Sencha Touch app by visiting this link. The button located in the bottom-left corner is supposed to show or hide the menu panel on top of the "Location info goes here" bar, but it seems to be functioning in an unexpected m ...

Modifying CSS to ensure compatibility with various browsers

I am curious if it is possible to modify some CSS when viewed in a different browser. For instance, I have this CSS for a flexbox div: .wdFlex { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit- ...