Disable track color

[larsk2009]

First of all, thanks for this project, I really like it!

Second: I noticed that the disabled state doesn't work for on chrome (desktop) and safari (ios) at the very least, I haven't tested it on other browsers.

The issue seems to be that the opacity is set to 0.5 but this doesn't actually work on these browsers. I propose calculating a color with 0.5 opacity which does work. I can make a PR for it if you want, the fix is very small.

Below you can find the fix, the text is generated by patch-package which I used to patch the package locally.

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch bulma-slider@2.0.4 for the project I'm working on.

Here is the diff that solved my problem:

diff --git a/node_modules/bulma-slider/src/sass/index.sass b/node_modules/bulma-slider/src/sass/index.sass
index 39d5cc4..9f364eb 100644
--- a/node_modules/bulma-slider/src/sass/index.sass
+++ b/node_modules/bulma-slider/src/sass/index.sass
@@ -197,6 +197,23 @@ input[type="range"]
          opacity: 0.5
          cursor: not-allowed

+         @each $name, $pair in $colors
+             $color: nth($pair, 1)
+             $color-invert: nth($pair, 2)
+
+             &.is-#{$name}
+                 &::-moz-range-track
+                     background: rgba($color, 0.5) !important
+                 &::-webkit-slider-runnable-track
+                     background: rgba($color, 0.5) !important
+                 &::-ms-track
+                     background: rgba($color, 0.5) !important
+
+                 &::-ms-fill-lower
+                     background: rgba($color, 0.5)
+                 &::-ms-fill-upper
+                     background: rgba($color, 0.5)
+
          &::-webkit-slider-thumb
              cursor: not-allowed
              transform: scale(1)

This issue body was partially generated by patch-package.