Fix Minecraft HOC Zoom Slider (#10236)

The blockly fieldSlider styling was being applied generically to all range inputs, including the zoom slider. To stop this, I've added a class to the fieldSlider input and added that more specific selector to its css.
microsoft · Oct 17, 2024 · de6ec9d · de6ec9d
1 parent a7e5cde
commit de6ec9d
Showing 1 changed file with 8 additions and 7 deletions.
diff --git a/pxtblocks/plugins/math/fieldSlider.ts b/pxtblocks/plugins/math/fieldSlider.ts
@@ -175,6 +175,7 @@ export class FieldSlider extends Blockly.FieldNumber {
 
     protected createSlider() {
         const slider = document.createElement("input");
+        slider.setAttribute('class', 'blocklyFieldSlider');
         slider.type = "range";
         slider.min = this.getMin() + "";
         slider.max = this.getMax() + "";
@@ -247,14 +248,14 @@ Blockly.Css.register(`
     margin-left: 10px;
 }
 
-input[type=range] {
+input[type=range].blocklyFieldSlider {
     -webkit-appearance: none;
     width: 100%;
 }
-input[type=range]:focus {
+input[type=range].blocklyFieldSlider:focus {
     outline: none;
 }
-input[type=range]::-webkit-slider-runnable-track {
+input[type=range].blocklyFieldSlider::-webkit-slider-runnable-track {
     -webkit-appearance: none;
     margin: 8px;
     height: 22px;
@@ -264,7 +265,7 @@ input[type=range]::-webkit-slider-runnable-track {
     margin-bottom: 20px;
     background: var(--blocklyFieldSliderBackgroundColor);
 }
-input[type=range]::-webkit-slider-thumb {
+input[type=range].blocklyFieldSlider::-webkit-slider-thumb {
     -webkit-appearance: none;
     width: 26px;
     height: 26px;
@@ -276,7 +277,7 @@ input[type=range]::-webkit-slider-thumb {
     box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.15);
     cursor: pointer;
 }
-input[type=range]::-moz-range-track {
+input[type=range].blocklyFieldSlider::-moz-range-track {
     margin: 8px;
     height: 22px;
     width: 95%;
@@ -285,7 +286,7 @@ input[type=range]::-moz-range-track {
     margin-bottom: 20px;
     background: #547AB2;
 }
-input[type=range]::-moz-range-thumb {
+input[type=range].blocklyFieldSlider::-moz-range-thumb {
     width: 26px;
     height: 26px;
     margin-top: -1px;
@@ -296,4 +297,4 @@ input[type=range]::-moz-range-thumb {
     box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.15);
     cursor: pointer;
 }
-`)
+`)