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 [email protected] 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.