Range input styles

src/codecs/imagequant/options.tsx

@@ -5,6 +5,7 @@ import { QuantizeOptions } from './processor-meta';
 import * as style from '../../components/options/style.scss';
 import Expander from '../../components/expander';
 import Select from '../../components/select';
+import Range from '../../components/range';
 
 const konamiPromise = konami();
 
@@ -60,29 +61,31 @@ export default class QuantizerOptions extends Component<Props, State> {
         </Expander>
         <Expander>
           {options.zx ? null :
-            <label class={style.optionTextFirst}>
+            <div class={style.optionOneCell}>
-              Colors:
+              <Range
-              <range-input
                 name="maxNumColors"
                 min="2"
                 max="256"
-                value={'' + options.maxNumColors}
+                value={options.maxNumColors}
-                onChange={this.onChange}
+                onInput={this.onChange}
-              />
+              >
-            </label>
+                Colors:
+              </Range>
+            </div>
           }
         </Expander>
-        <label class={style.optionTextFirst}>
+        <div class={style.optionOneCell}>
-          Dithering:
+          <Range
-          <range-input
             name="dither"
             min="0"
             max="1"
             step="0.01"
-            value={'' + options.dither}
+            value={options.dither}
-            onChange={this.onChange}
+            onInput={this.onChange}
-          />
+          >
-        </label>
+            Dithering:
+          </Range>
+        </div>
       </form>
     );
   }

src/components/Options/style.scss

@@ -24,6 +24,10 @@ $horizontalPadding: 15px;
   padding: 10px $horizontalPadding;
 }
 
+.option-one-cell {
+  padding: 10px $horizontalPadding;
+}
+
 .option-input-first,
 .section-enabler {
   cursor: pointer;

src/components/range/index.tsx

@@ -0,0 +1,44 @@
+import { h, Component } from 'preact';
+import * as style from './style.scss';
+import RangeInputElement from '../../custom-els/RangeInput';
+import '../../custom-els/RangeInput';
+import { linkRef } from '../../lib/initial-util';
+
+interface Props extends JSX.HTMLAttributes {}
+interface State {}
+
+export default class Range extends Component<Props, State> {
+  rangeWc?: RangeInputElement;
+
+  render(props: Props) {
+    const {
+      children,
+      ...otherProps
+    } = props;
+
+    const {
+      value, min, max, onInput,
+    } = props;
+
+    return (
+      <label class={style.range}>
+        <span class={style.labelText}>{children}</span>
+        <input
+          type="number"
+          class={style.textInput}
+          value={value}
+          min={min}
+          max={max}
+          onInput={onInput}
+        />
+        <div class={style.rangeWcContainer}>
+          <range-input
+            ref={linkRef(this, 'rangeWc')}
+            class={style.rangeWc}
+            {...otherProps}
+          />
+        </div>
+      </label>
+    );
+  }
+}

src/components/range/style.scss

@@ -0,0 +1,45 @@
+.range {
+  display: grid;
+  grid-template-columns: 1fr auto;
+}
+
+.label-text {
+  color: #fff; /* TEMP */
+}
+
+.range-wc-container {
+  grid-column: 1 / 3;
+}
+
+.range-wc {
+  width: 100%;
+}
+
+.text-input {
+  text-align: right;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  border: none;
+  padding: 2px 5px;
+  box-sizing: border-box;
+  text-decoration: underline;
+  text-decoration-style: dotted;
+  width: 48px;
+  position: relative;
+  left: 5px;
+
+  &:focus {
+    background: #fff;
+    color: #000;
+  }
+
+
+  // Remove the number controls
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    margin: 0;
+  }
+}

src/custom-els/RangeInput/missing-types.d.ts

@@ -1,9 +1,5 @@
 declare namespace JSX {
-  interface RangeInputAttributes extends HTMLAttributes {
-    reversed?: boolean;
-  }
-
   interface IntrinsicElements {
-    'range-input': RangeInputAttributes;
+    'range-input': HTMLAttributes;
   }
 }