@bodynarf/react.components 1.14.1 → 1.14.3

package/components/primitives/slider/component/style.css

@@ -10,20 +10,29 @@
   width: auto;
   height: 200px;
   padding-top: 0;
-  padding-left: 0.5rem;
+  padding-left: 0;
+}
+
+.bbr-slider-track-wrapper {
+  position: relative;
+  width: 100%;
+}
+.bbr-slider-track-wrapper.is-vertical {
+  width: auto;
+  height: 100%;
 }
 
 .bbr-slider-output {
   position: absolute;
-  top: -1.5rem;
+  bottom: 100%;
   display: inline-block;
   width: 3rem;
   padding: 0.25rem 0.5rem;
   font-size: 0.75rem;
   text-align: center;
-  color: hsl(0, 0%, 100%);
-  background-color: hsl(171, 100%, 41%);
-  border-radius: 4px;
+  color: var(--bulma-white, #fff);
+  background-color: var(--bulma-primary, #00d1b2);
+  border-radius: var(--bulma-radius, 4px);
   pointer-events: none;
 }
 .bbr-slider-output::after {
@@ -34,7 +43,105 @@
   margin-left: -5px;
   border-width: 5px;
   border-style: solid;
-  border-color: hsl(171, 100%, 41%) transparent transparent transparent;
+  border-color: var(--bulma-primary, #00d1b2) transparent transparent transparent;
+}
+.bbr-slider-output.is-vertical {
+  bottom: auto;
+  left: 1.25rem;
+}
+.bbr-slider-output.is-vertical::after {
+  top: 50%;
+  left: -10px;
+  margin-top: -5px;
+  margin-left: 0;
+  border-color: transparent var(--bulma-primary, #00d1b2) transparent transparent;
+}
+.bbr-slider-output.is-bottom {
+  bottom: auto;
+  top: 100%;
+}
+.bbr-slider-output.is-bottom::after {
+  top: auto;
+  bottom: 100%;
+  border-color: transparent transparent var(--bulma-primary, #00d1b2);
+}
+.bbr-slider-output.is-primary {
+  background-color: var(--bulma-primary, #00d1b2);
+  color: var(--bulma-white, #fff);
+}
+.bbr-slider-output.is-primary::after {
+  border-color: var(--bulma-primary, #00d1b2) transparent transparent transparent;
+}
+.bbr-slider-output.is-primary.is-vertical::after {
+  border-color: transparent var(--bulma-primary, #00d1b2) transparent transparent;
+}
+.bbr-slider-output.is-primary.is-bottom::after {
+  border-color: transparent transparent var(--bulma-primary, #00d1b2);
+}
+.bbr-slider-output.is-link {
+  background-color: var(--bulma-link, #485fc7);
+  color: var(--bulma-white, #fff);
+}
+.bbr-slider-output.is-link::after {
+  border-color: var(--bulma-link, #485fc7) transparent transparent transparent;
+}
+.bbr-slider-output.is-link.is-vertical::after {
+  border-color: transparent var(--bulma-link, #485fc7) transparent transparent;
+}
+.bbr-slider-output.is-link.is-bottom::after {
+  border-color: transparent transparent var(--bulma-link, #485fc7);
+}
+.bbr-slider-output.is-info {
+  background-color: var(--bulma-info, #3e8ed0);
+  color: var(--bulma-white, #fff);
+}
+.bbr-slider-output.is-info::after {
+  border-color: var(--bulma-info, #3e8ed0) transparent transparent transparent;
+}
+.bbr-slider-output.is-info.is-vertical::after {
+  border-color: transparent var(--bulma-info, #3e8ed0) transparent transparent;
+}
+.bbr-slider-output.is-info.is-bottom::after {
+  border-color: transparent transparent var(--bulma-info, #3e8ed0);
+}
+.bbr-slider-output.is-success {
+  background-color: var(--bulma-success, #48c78e);
+  color: var(--bulma-white, #fff);
+}
+.bbr-slider-output.is-success::after {
+  border-color: var(--bulma-success, #48c78e) transparent transparent transparent;
+}
+.bbr-slider-output.is-success.is-vertical::after {
+  border-color: transparent var(--bulma-success, #48c78e) transparent transparent;
+}
+.bbr-slider-output.is-success.is-bottom::after {
+  border-color: transparent transparent var(--bulma-success, #48c78e);
+}
+.bbr-slider-output.is-warning {
+  background-color: var(--bulma-warning, #ffe08a);
+  color: rgba(0, 0, 0, 0.7);
+}
+.bbr-slider-output.is-warning::after {
+  border-color: var(--bulma-warning, #ffe08a) transparent transparent transparent;
+}
+.bbr-slider-output.is-warning.is-vertical::after {
+  border-color: transparent var(--bulma-warning, #ffe08a) transparent transparent;
+}
+.bbr-slider-output.is-warning.is-bottom::after {
+  border-color: transparent transparent var(--bulma-warning, #ffe08a);
+}
+.bbr-slider-output.is-danger {
+  background-color: var(--bulma-danger, #f14668);
+  color: var(--bulma-white, #fff);
+}
+.bbr-slider-output.is-danger::after {
+  border-color: var(--bulma-danger, #f14668) transparent transparent transparent;
+}
+.bbr-slider-output.is-danger.is-vertical::after {
+  border-color: transparent var(--bulma-danger, #f14668) transparent transparent;
+}
+.bbr-slider-output.is-danger.is-bottom::after {
+  border-color: transparent transparent var(--bulma-danger, #f14668);
 }
 
 .bbr-slider-labels {
@@ -42,7 +149,7 @@
   justify-content: space-between;
   margin-top: 0.25rem;
   font-size: 0.75rem;
-  color: hsl(0, 0%, 48%);
+  color: var(--bulma-grey, #7a7a7a);
 }
 
 input[type=range].slider.bbr-slider {
@@ -58,24 +165,24 @@ input[type=range].slider.bbr-slider::-webkit-slider-runnable-track {
   box-sizing: border-box;
   width: 100%;
   height: 0.5rem;
-  background: linear-gradient(to right, hsl(171, 100%, 41%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
-  border: 0px solid hsl(0, 0%, 48%);
-  border-radius: 4px;
-  box-shadow: 0px 0px 0px hsl(0, 0%, 48%);
+  background: linear-gradient(to right, var(--bulma-primary, #00d1b2) var(--progress-percent), var(--bulma-grey-lighter, #dbdbdb) var(--progress-percent));
+  border: 0px solid var(--bulma-grey, #7a7a7a);
+  border-radius: var(--bulma-radius, 4px);
+  box-shadow: 0px 0px 0px var(--bulma-grey, #7a7a7a);
 }
 input[type=range].slider.bbr-slider::-moz-range-track {
   box-sizing: border-box;
   width: 100%;
   height: 0.5rem;
-  background: hsl(0, 0%, 86%);
-  border: 0px solid hsl(0, 0%, 48%);
-  border-radius: 4px;
-  box-shadow: 0px 0px 0px hsl(0, 0%, 48%);
+  background: var(--bulma-grey-lighter, #dbdbdb);
+  border: 0px solid var(--bulma-grey, #7a7a7a);
+  border-radius: var(--bulma-radius, 4px);
+  box-shadow: 0px 0px 0px var(--bulma-grey, #7a7a7a);
 }
 input[type=range].slider.bbr-slider::-moz-range-progress {
   height: 0.5rem;
-  background: hsl(171, 100%, 41%);
-  border-radius: 4px;
+  background: var(--bulma-primary, #00d1b2);
+  border-radius: var(--bulma-radius, 4px);
 }
 input[type=range].slider.bbr-slider::-ms-track {
   box-sizing: border-box;
@@ -86,21 +193,21 @@ input[type=range].slider.bbr-slider::-ms-track {
   color: transparent;
 }
 input[type=range].slider.bbr-slider::-ms-fill-lower {
-  background: hsl(171, 100%, 41%);
-  border-radius: 4px;
+  background: var(--bulma-primary, #00d1b2);
+  border-radius: var(--bulma-radius, 4px);
 }
 input[type=range].slider.bbr-slider::-ms-fill-upper {
-  background: hsl(0, 0%, 86%);
-  border-radius: 4px;
+  background: var(--bulma-grey-lighter, #dbdbdb);
+  border-radius: var(--bulma-radius, 4px);
 }
 input[type=range].slider.bbr-slider::-webkit-slider-thumb {
   appearance: none;
   width: 1rem;
   height: 1rem;
   margin-top: -0.25rem;
-  background: hsl(0, 0%, 100%);
-  border: 1px solid hsl(0, 0%, 71%);
-  border-radius: 4px;
+  background: var(--bulma-white, #fff);
+  border: 1px solid var(--bulma-grey-light, #b5b5b5);
+  border-radius: var(--bulma-radius, 4px);
   box-shadow: none;
   transition: transform 0.2s ease;
 }
@@ -110,9 +217,9 @@ input[type=range].slider.bbr-slider::-webkit-slider-thumb:hover {
 input[type=range].slider.bbr-slider::-moz-range-thumb {
   width: 1rem;
   height: 1rem;
-  background: hsl(0, 0%, 100%);
-  border: 1px solid hsl(0, 0%, 71%);
-  border-radius: 4px;
+  background: var(--bulma-white, #fff);
+  border: 1px solid var(--bulma-grey-light, #b5b5b5);
+  border-radius: var(--bulma-radius, 4px);
   box-shadow: none;
   transition: transform 0.2s ease;
 }
@@ -122,21 +229,21 @@ input[type=range].slider.bbr-slider::-moz-range-thumb:hover {
 input[type=range].slider.bbr-slider::-ms-thumb {
   width: 1rem;
   height: 1rem;
-  background: hsl(0, 0%, 100%);
-  border: 1px solid hsl(0, 0%, 71%);
-  border-radius: 4px;
+  background: var(--bulma-white, #fff);
+  border: 1px solid var(--bulma-grey-light, #b5b5b5);
+  border-radius: var(--bulma-radius, 4px);
   box-shadow: none;
 }
 input[type=range].slider.bbr-slider:focus {
   outline: none;
 }
 input[type=range].slider.bbr-slider:focus::-webkit-slider-thumb {
-  border-color: hsl(171, 100%, 41%);
-  box-shadow: 0 0 0 0.125em rgba(0, 209.1, 177.735, 0.25);
+  border-color: var(--bulma-primary, #00d1b2);
+  box-shadow: 0 0 0 0.125em rgba(var(--bulma-primary, #00d1b2), 0.25);
 }
 input[type=range].slider.bbr-slider:focus::-moz-range-thumb {
-  border-color: hsl(171, 100%, 41%);
-  box-shadow: 0 0 0 0.125em rgba(0, 209.1, 177.735, 0.25);
+  border-color: var(--bulma-primary, #00d1b2);
+  box-shadow: 0 0 0 0.125em rgba(var(--bulma-primary, #00d1b2), 0.25);
 }
 input[type=range].slider.bbr-slider:disabled {
   cursor: not-allowed;
@@ -220,175 +327,107 @@ input[type=range].slider.bbr-slider.is-large::-ms-thumb {
   width: 1.5rem;
   margin-top: 0;
 }
-input[type=range].slider.bbr-slider.is-white::-webkit-slider-runnable-track {
-  background: linear-gradient(to right, hsl(0, 0%, 100%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
-}
-input[type=range].slider.bbr-slider.is-white::-moz-range-progress {
-  background: hsl(0, 0%, 100%);
-}
-input[type=range].slider.bbr-slider.is-white::-ms-fill-lower {
-  background: hsl(0, 0%, 100%);
-}
-input[type=range].slider.bbr-slider.is-white:focus::-webkit-slider-thumb {
-  border-color: hsl(0, 0%, 100%);
-  box-shadow: 0 0 0 0.125em rgba(255, 255, 255, 0.25);
-}
-input[type=range].slider.bbr-slider.is-white:focus::-moz-range-thumb {
-  border-color: hsl(0, 0%, 100%);
-  box-shadow: 0 0 0 0.125em rgba(255, 255, 255, 0.25);
-}
-input[type=range].slider.bbr-slider.is-black::-webkit-slider-runnable-track {
-  background: linear-gradient(to right, hsl(0, 0%, 4%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
-}
-input[type=range].slider.bbr-slider.is-black::-moz-range-progress {
-  background: hsl(0, 0%, 4%);
-}
-input[type=range].slider.bbr-slider.is-black::-ms-fill-lower {
-  background: hsl(0, 0%, 4%);
-}
-input[type=range].slider.bbr-slider.is-black:focus::-webkit-slider-thumb {
-  border-color: hsl(0, 0%, 4%);
-  box-shadow: 0 0 0 0.125em rgba(10.2, 10.2, 10.2, 0.25);
-}
-input[type=range].slider.bbr-slider.is-black:focus::-moz-range-thumb {
-  border-color: hsl(0, 0%, 4%);
-  box-shadow: 0 0 0 0.125em rgba(10.2, 10.2, 10.2, 0.25);
-}
-input[type=range].slider.bbr-slider.is-light::-webkit-slider-runnable-track {
-  background: linear-gradient(to right, hsl(0, 0%, 96%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
-}
-input[type=range].slider.bbr-slider.is-light::-moz-range-progress {
-  background: hsl(0, 0%, 96%);
-}
-input[type=range].slider.bbr-slider.is-light::-ms-fill-lower {
-  background: hsl(0, 0%, 96%);
-}
-input[type=range].slider.bbr-slider.is-light:focus::-webkit-slider-thumb {
-  border-color: hsl(0, 0%, 96%);
-  box-shadow: 0 0 0 0.125em rgba(244.8, 244.8, 244.8, 0.25);
-}
-input[type=range].slider.bbr-slider.is-light:focus::-moz-range-thumb {
-  border-color: hsl(0, 0%, 96%);
-  box-shadow: 0 0 0 0.125em rgba(244.8, 244.8, 244.8, 0.25);
-}
-input[type=range].slider.bbr-slider.is-dark::-webkit-slider-runnable-track {
-  background: linear-gradient(to right, hsl(0, 0%, 21%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
-}
-input[type=range].slider.bbr-slider.is-dark::-moz-range-progress {
-  background: hsl(0, 0%, 21%);
-}
-input[type=range].slider.bbr-slider.is-dark::-ms-fill-lower {
-  background: hsl(0, 0%, 21%);
-}
-input[type=range].slider.bbr-slider.is-dark:focus::-webkit-slider-thumb {
-  border-color: hsl(0, 0%, 21%);
-  box-shadow: 0 0 0 0.125em rgba(53.55, 53.55, 53.55, 0.25);
-}
-input[type=range].slider.bbr-slider.is-dark:focus::-moz-range-thumb {
-  border-color: hsl(0, 0%, 21%);
-  box-shadow: 0 0 0 0.125em rgba(53.55, 53.55, 53.55, 0.25);
-}
 input[type=range].slider.bbr-slider.is-primary::-webkit-slider-runnable-track {
-  background: linear-gradient(to right, hsl(171, 100%, 41%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
+  background: linear-gradient(to right, var(--bulma-primary, #00d1b2) var(--progress-percent), var(--bulma-grey-lighter, #dbdbdb) var(--progress-percent));
 }
 input[type=range].slider.bbr-slider.is-primary::-moz-range-progress {
-  background: hsl(171, 100%, 41%);
+  background: var(--bulma-primary, #00d1b2);
 }
 input[type=range].slider.bbr-slider.is-primary::-ms-fill-lower {
-  background: hsl(171, 100%, 41%);
+  background: var(--bulma-primary, #00d1b2);
 }
 input[type=range].slider.bbr-slider.is-primary:focus::-webkit-slider-thumb {
-  border-color: hsl(171, 100%, 41%);
-  box-shadow: 0 0 0 0.125em rgba(0, 209.1, 177.735, 0.25);
+  border-color: var(--bulma-primary, #00d1b2);
+  box-shadow: 0 0 0 0.125em rgba(var(--bulma-primary, #00d1b2), 0.25);
 }
 input[type=range].slider.bbr-slider.is-primary:focus::-moz-range-thumb {
-  border-color: hsl(171, 100%, 41%);
-  box-shadow: 0 0 0 0.125em rgba(0, 209.1, 177.735, 0.25);
+  border-color: var(--bulma-primary, #00d1b2);
+  box-shadow: 0 0 0 0.125em rgba(var(--bulma-primary, #00d1b2), 0.25);
 }
 input[type=range].slider.bbr-slider.is-link::-webkit-slider-runnable-track {
-  background: linear-gradient(to right, hsl(229, 53%, 53%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
+  background: linear-gradient(to right, var(--bulma-link, #485fc7) var(--progress-percent), var(--bulma-grey-lighter, #dbdbdb) var(--progress-percent));
 }
 input[type=range].slider.bbr-slider.is-link::-moz-range-progress {
-  background: hsl(229, 53%, 53%);
+  background: var(--bulma-link, #485fc7);
 }
 input[type=range].slider.bbr-slider.is-link::-ms-fill-lower {
-  background: hsl(229, 53%, 53%);
+  background: var(--bulma-link, #485fc7);
 }
 input[type=range].slider.bbr-slider.is-link:focus::-webkit-slider-thumb {
-  border-color: hsl(229, 53%, 53%);
-  box-shadow: 0 0 0 0.125em rgba(71.6295, 94.92035, 198.6705, 0.25);
+  border-color: var(--bulma-link, #485fc7);
+  box-shadow: 0 0 0 0.125em rgba(var(--bulma-link, #485fc7), 0.25);
 }
 input[type=range].slider.bbr-slider.is-link:focus::-moz-range-thumb {
-  border-color: hsl(229, 53%, 53%);
-  box-shadow: 0 0 0 0.125em rgba(71.6295, 94.92035, 198.6705, 0.25);
+  border-color: var(--bulma-link, #485fc7);
+  box-shadow: 0 0 0 0.125em rgba(var(--bulma-link, #485fc7), 0.25);
 }
 input[type=range].slider.bbr-slider.is-info::-webkit-slider-runnable-track {
-  background: linear-gradient(to right, hsl(207, 61%, 53%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
+  background: linear-gradient(to right, var(--bulma-info, #3e8ed0) var(--progress-percent), var(--bulma-grey-lighter, #dbdbdb) var(--progress-percent));
 }
 input[type=range].slider.bbr-slider.is-info::-moz-range-progress {
-  background: hsl(207, 61%, 53%);
+  background: var(--bulma-info, #3e8ed0);
 }
 input[type=range].slider.bbr-slider.is-info::-ms-fill-lower {
-  background: hsl(207, 61%, 53%);
+  background: var(--bulma-info, #3e8ed0);
 }
 input[type=range].slider.bbr-slider.is-info:focus::-webkit-slider-thumb {
-  border-color: hsl(207, 61%, 53%);
-  box-shadow: 0 0 0 0.125em rgba(62.0415, 142.46085, 208.2585, 0.25);
+  border-color: var(--bulma-info, #3e8ed0);
+  box-shadow: 0 0 0 0.125em rgba(var(--bulma-info, #3e8ed0), 0.25);
 }
 input[type=range].slider.bbr-slider.is-info:focus::-moz-range-thumb {
-  border-color: hsl(207, 61%, 53%);
-  box-shadow: 0 0 0 0.125em rgba(62.0415, 142.46085, 208.2585, 0.25);
+  border-color: var(--bulma-info, #3e8ed0);
+  box-shadow: 0 0 0 0.125em rgba(var(--bulma-info, #3e8ed0), 0.25);
 }
 input[type=range].slider.bbr-slider.is-success::-webkit-slider-runnable-track {
-  background: linear-gradient(to right, hsl(153, 53%, 53%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
+  background: linear-gradient(to right, var(--bulma-success, #48c78e) var(--progress-percent), var(--bulma-grey-lighter, #dbdbdb) var(--progress-percent));
 }
 input[type=range].slider.bbr-slider.is-success::-moz-range-progress {
-  background: hsl(153, 53%, 53%);
+  background: var(--bulma-success, #48c78e);
 }
 input[type=range].slider.bbr-slider.is-success::-ms-fill-lower {
-  background: hsl(153, 53%, 53%);
+  background: var(--bulma-success, #48c78e);
 }
 input[type=range].slider.bbr-slider.is-success:focus::-webkit-slider-thumb {
-  border-color: hsl(153, 53%, 53%);
-  box-shadow: 0 0 0 0.125em rgba(71.6295, 198.6705, 141.50205, 0.25);
+  border-color: var(--bulma-success, #48c78e);
+  box-shadow: 0 0 0 0.125em rgba(var(--bulma-success, #48c78e), 0.25);
 }
 input[type=range].slider.bbr-slider.is-success:focus::-moz-range-thumb {
-  border-color: hsl(153, 53%, 53%);
-  box-shadow: 0 0 0 0.125em rgba(71.6295, 198.6705, 141.50205, 0.25);
+  border-color: var(--bulma-success, #48c78e);
+  box-shadow: 0 0 0 0.125em rgba(var(--bulma-success, #48c78e), 0.25);
 }
 input[type=range].slider.bbr-slider.is-warning::-webkit-slider-runnable-track {
-  background: linear-gradient(to right, hsl(44, 100%, 77%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
+  background: linear-gradient(to right, var(--bulma-warning, #ffe08a) var(--progress-percent), var(--bulma-grey-lighter, #dbdbdb) var(--progress-percent));
 }
 input[type=range].slider.bbr-slider.is-warning::-moz-range-progress {
-  background: hsl(44, 100%, 77%);
+  background: var(--bulma-warning, #ffe08a);
 }
 input[type=range].slider.bbr-slider.is-warning::-ms-fill-lower {
-  background: hsl(44, 100%, 77%);
+  background: var(--bulma-warning, #ffe08a);
 }
 input[type=range].slider.bbr-slider.is-warning:focus::-webkit-slider-thumb {
-  border-color: hsl(44, 100%, 77%);
-  box-shadow: 0 0 0 0.125em rgba(255, 223.72, 137.7, 0.25);
+  border-color: var(--bulma-warning, #ffe08a);
+  box-shadow: 0 0 0 0.125em rgba(var(--bulma-warning, #ffe08a), 0.25);
 }
 input[type=range].slider.bbr-slider.is-warning:focus::-moz-range-thumb {
-  border-color: hsl(44, 100%, 77%);
-  box-shadow: 0 0 0 0.125em rgba(255, 223.72, 137.7, 0.25);
+  border-color: var(--bulma-warning, #ffe08a);
+  box-shadow: 0 0 0 0.125em rgba(var(--bulma-warning, #ffe08a), 0.25);
 }
 input[type=range].slider.bbr-slider.is-danger::-webkit-slider-runnable-track {
-  background: linear-gradient(to right, hsl(348, 86%, 61%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
+  background: linear-gradient(to right, var(--bulma-danger, #f14668) var(--progress-percent), var(--bulma-grey-lighter, #dbdbdb) var(--progress-percent));
 }
 input[type=range].slider.bbr-slider.is-danger::-moz-range-progress {
-  background: hsl(348, 86%, 61%);
+  background: var(--bulma-danger, #f14668);
 }
 input[type=range].slider.bbr-slider.is-danger::-ms-fill-lower {
-  background: hsl(348, 86%, 61%);
+  background: var(--bulma-danger, #f14668);
 }
 input[type=range].slider.bbr-slider.is-danger:focus::-webkit-slider-thumb {
-  border-color: hsl(348, 86%, 61%);
-  box-shadow: 0 0 0 0.125em rgba(241.077, 70.023, 104.2338, 0.25);
+  border-color: var(--bulma-danger, #f14668);
+  box-shadow: 0 0 0 0.125em rgba(var(--bulma-danger, #f14668), 0.25);
 }
 input[type=range].slider.bbr-slider.is-danger:focus::-moz-range-thumb {
-  border-color: hsl(348, 86%, 61%);
-  box-shadow: 0 0 0 0.125em rgba(241.077, 70.023, 104.2338, 0.25);
+  border-color: var(--bulma-danger, #f14668);
+  box-shadow: 0 0 0 0.125em rgba(var(--bulma-danger, #f14668), 0.25);
 }
 input[type=range].slider.bbr-slider.is-vertical {
   writing-mode: vertical-lr;
@@ -400,39 +439,27 @@ input[type=range].slider.bbr-slider.is-vertical {
 input[type=range].slider.bbr-slider.is-vertical::-webkit-slider-runnable-track {
   width: 0.5rem;
   height: 100%;
-  background: linear-gradient(to top, hsl(171, 100%, 41%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
+  background: linear-gradient(to top, var(--bulma-primary, #00d1b2) var(--progress-percent), var(--bulma-grey-lighter, #dbdbdb) var(--progress-percent));
 }
 input[type=range].slider.bbr-slider.is-vertical::-webkit-slider-thumb {
   margin-top: 0;
   margin-left: -0.25rem;
 }
-input[type=range].slider.bbr-slider.is-vertical.is-white::-webkit-slider-runnable-track {
-  background: linear-gradient(to top, hsl(0, 0%, 100%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
-}
-input[type=range].slider.bbr-slider.is-vertical.is-black::-webkit-slider-runnable-track {
-  background: linear-gradient(to top, hsl(0, 0%, 4%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
-}
-input[type=range].slider.bbr-slider.is-vertical.is-light::-webkit-slider-runnable-track {
-  background: linear-gradient(to top, hsl(0, 0%, 96%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
-}
-input[type=range].slider.bbr-slider.is-vertical.is-dark::-webkit-slider-runnable-track {
-  background: linear-gradient(to top, hsl(0, 0%, 21%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
-}
 input[type=range].slider.bbr-slider.is-vertical.is-primary::-webkit-slider-runnable-track {
-  background: linear-gradient(to top, hsl(171, 100%, 41%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
+  background: linear-gradient(to top, var(--bulma-primary, #00d1b2) var(--progress-percent), var(--bulma-grey-lighter, #dbdbdb) var(--progress-percent));
 }
 input[type=range].slider.bbr-slider.is-vertical.is-link::-webkit-slider-runnable-track {
-  background: linear-gradient(to top, hsl(229, 53%, 53%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
+  background: linear-gradient(to top, var(--bulma-link, #485fc7) var(--progress-percent), var(--bulma-grey-lighter, #dbdbdb) var(--progress-percent));
 }
 input[type=range].slider.bbr-slider.is-vertical.is-info::-webkit-slider-runnable-track {
-  background: linear-gradient(to top, hsl(207, 61%, 53%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
+  background: linear-gradient(to top, var(--bulma-info, #3e8ed0) var(--progress-percent), var(--bulma-grey-lighter, #dbdbdb) var(--progress-percent));
 }
 input[type=range].slider.bbr-slider.is-vertical.is-success::-webkit-slider-runnable-track {
-  background: linear-gradient(to top, hsl(153, 53%, 53%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
+  background: linear-gradient(to top, var(--bulma-success, #48c78e) var(--progress-percent), var(--bulma-grey-lighter, #dbdbdb) var(--progress-percent));
 }
 input[type=range].slider.bbr-slider.is-vertical.is-warning::-webkit-slider-runnable-track {
-  background: linear-gradient(to top, hsl(44, 100%, 77%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
+  background: linear-gradient(to top, var(--bulma-warning, #ffe08a) var(--progress-percent), var(--bulma-grey-lighter, #dbdbdb) var(--progress-percent));
 }
 input[type=range].slider.bbr-slider.is-vertical.is-danger::-webkit-slider-runnable-track {
-  background: linear-gradient(to top, hsl(348, 86%, 61%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
+  background: linear-gradient(to top, var(--bulma-danger, #f14668) var(--progress-percent), var(--bulma-grey-lighter, #dbdbdb) var(--progress-percent));
 }

package/components/primitives/slider/component/style.scss

@@ -1,4 +1,33 @@
-@import "bulma/sass/utilities/derived-variables";
+@use "sass:list";
+
+// Bulma variables - compatible with v0.9.x and v1.x
+// Uses CSS variables with fallbacks matching Bulma 0.9.4 defaults
+// v1.x: CSS variables (--bulma-*) will be used if defined
+// v0.9.x: Fallback values will be used (no CSS variables in 0.9.x)
+
+// Colors
+$primary: var(--bulma-primary, #00d1b2);
+$white: var(--bulma-white, #fff);
+$grey-lighter: var(--bulma-grey-lighter, #dbdbdb);
+$grey-light: var(--bulma-grey-light, #b5b5b5);
+$grey: var(--bulma-grey, #7a7a7a);
+$radius: var(--bulma-radius, 4px);
+
+// Sizes - Sass variables for calculations
+$size-small: 0.75rem;
+$size-normal: 1rem;
+$size-medium: 1.25rem;
+$size-large: 1.5rem;
+
+// Color map for variations
+$colors: (
+    "primary": ($primary, $white),
+    "link": (var(--bulma-link, #485fc7), $white),
+    "info": (var(--bulma-info, #3e8ed0), $white),
+    "success": (var(--bulma-success, #48c78e), $white),
+    "warning": (var(--bulma-warning, #ffe08a), rgba(0, 0, 0, 0.7)),
+    "danger": (var(--bulma-danger, #f14668), $white)
+);
 
 $slider-radius: $radius !default;
 $slider-track-background: $grey-lighter !default;
@@ -60,13 +89,23 @@ $slider-output-radius: $radius !default;
         width: auto;
         height: 200px;
         padding-top: 0;
-        padding-left: 0.5rem;
+        padding-left: 0;
+    }
+}
+
+.bbr-slider-track-wrapper {
+    position: relative;
+    width: 100%;
+
+    &.is-vertical {
+        width: auto;
+        height: 100%;
     }
 }
 
 .bbr-slider-output {
     position: absolute;
-    top: -1.5rem;
+    bottom: 100%;
     display: inline-block;
     width: $slider-output-width;
     padding: 0.25rem 0.5rem;
@@ -87,6 +126,55 @@ $slider-output-radius: $radius !default;
         border-style: solid;
         border-color: $slider-output-background transparent transparent transparent;
     }
+
+    // Vertical mode - position to the right of slider
+    &.is-vertical {
+        bottom: auto;
+        left: 1.25rem;
+
+        &::after {
+            top: 50%;
+            left: -10px;
+            margin-top: -5px;
+            margin-left: 0;
+            border-color: transparent $slider-output-background transparent transparent;
+        }
+    }
+
+    // Bottom mode - position below the slider (horizontal only)
+    &.is-bottom {
+        bottom: auto;
+        top: 100%;
+
+        &::after {
+            top: auto;
+            bottom: 100%;
+            border-color: transparent transparent $slider-output-background;
+        }
+    }
+
+    // Color variations for output
+    @each $name, $pair in $colors {
+        $color: list.nth($pair, 1);
+        $color-invert: list.nth($pair, 2);
+
+        &.is-#{$name} {
+            background-color: $color;
+            color: $color-invert;
+
+            &::after {
+                border-color: $color transparent transparent transparent;
+            }
+
+            &.is-vertical::after {
+                border-color: transparent $color transparent transparent;
+            }
+
+            &.is-bottom::after {
+                border-color: transparent transparent $color;
+            }
+        }
+    }
 }
 
 .bbr-slider-labels {
@@ -248,7 +336,7 @@ input[type="range"].slider.bbr-slider {
 
     // Color variations
     @each $name, $pair in $colors {
-        $color: nth($pair, 1);
+        $color: list.nth($pair, 1);
 
         &.is-#{$name} {
             &::-webkit-slider-runnable-track {
@@ -305,7 +393,7 @@ input[type="range"].slider.bbr-slider {
         }
 
         @each $name, $pair in $colors {
-            $color: nth($pair, 1);
+            $color: list.nth($pair, 1);
 
             &.is-#{$name} {
                 &::-webkit-slider-runnable-track {

package/components/primitives/slider/types.d.ts

@@ -15,6 +15,11 @@ export type SliderProps = Omit<BaseNotNullableInputElementProps<number>, "readon
      * @default false
      */
     showValue?: boolean;
+    /**
+     * Position of the value tooltip in horizontal mode.
+     * @default "top"
+     */
+    valuePosition?: "top" | "bottom";
     /**
      * Display min and max labels below the slider.
      * @default false

package/components/primitives/slider/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/slider/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gCAAgC,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAE/E,wCAAwC;AACxC,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,gCAAgC,CAAC,MAAM,CAAC,EACjE,UAAU,GAAG,iBAAiB,GAC9B,SAAS,GAAG,aAAa,GACzB,MAAM,GAAG,WAAW,GACpB,OAAO,GAAG,SAAS,CACxB,GAAG,eAAe,GAAG;IAClB,oBAAoB;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,oBAAoB;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;;;OAKG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CAC9C,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/slider/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gCAAgC,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAE/E,wCAAwC;AACxC,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,gCAAgC,CAAC,MAAM,CAAC,EACjE,UAAU,GAAG,iBAAiB,GAC9B,SAAS,GAAG,aAAa,GACzB,MAAM,GAAG,WAAW,GACpB,OAAO,GAAG,SAAS,CACxB,GAAG,eAAe,GAAG;IAClB,oBAAoB;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,oBAAoB;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,aAAa,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAEjC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;;;OAKG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CAC9C,CAAC"}