Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Custom input range thumb not styled properly, when using Sass files.

See original GitHub issue

Operating system and version: Windows 10 64-bit
Browser and version:
- Google Chrome 72.0.3626.81 (Official Build) (64-bit);
- Opera 58.0.3135.53.

Reduced test case

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>
    <meta http-equiv='x-ua-compatible' content='ie=edge'>

    <link rel="stylesheet" href="main.css">

  </head>

  <body>
    <label for="customRange1">Example range</label>
    <input type="range" class="custom-range" id="customRange1">

  </body>
</html>

SCSS

@import '../node_modules/bootstrap/scss/bootstrap-reboot.scss';

@import '../node_modules/bootstrap/scss/forms';
@import '../node_modules/bootstrap/scss/custom-forms';

The shown code generates an input range without proper thumb styling:

Notes

It works fine on Firefox 65.0;
It works on every mentioned browsers if I import the bootstrap CSS file (dist/css/bootstrap.css).

Issue Analytics

State:
Created 5 years ago
Comments:6 (4 by maintainers)

Top GitHub Comments

3reactions

patrickhlaukecommented, Feb 21, 2019

https://getbootstrap.com/docs/4.3/getting-started/build-tools/#autoprefixer

3reactions

TheoBPcommented, Feb 21, 2019

I think there is an issue with node-sass. I was experiencing the same issue before I switched to dart-sass. The problem is node-sass doesn’t add the -webkit-appearance: none CSS rule to the .custom-range class.

Top Results From Across the Web

I am trying to style the thumb of a range input but the webkit ...

The issue was that you haven't eliminated the default appearance of the slider thumb. So no custom style would be implemented if the...

A Sliding Nightmare: Understanding the Range Input

Having a different structure and being unable to access all the elements inside in order to style everything as we wish means that...

range-slider-sass - npm

A sass snippet for styling input type range. Latest version: 2.0.0, ... There are no other projects in the npm registry using range-slider-sass....

List of Pseudo-Elements to Style Form Controls - TJ VanToll

I am not aware of any form related pseudo-elements that Presto provides. ... As of IE10 the file input button can be styled...

Multi Range input, CSS-only - CodePen

range input slider with CSS ticks by using a wrapper with custom css properties (css ... <div class="range-slider" style='--min:0; --max:100; --step:5; ...