@zywave/zui-slider 4.3.2 → 4.4.0-pre.0

package/dist/zui-slider-css.js

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const style = css `:host{--zui-slider-thumb-size: 1.875rem;display:block;padding:calc(var(--zui-slider-thumb-size)/2) 0}:host input{width:100%;height:.25rem;vertical-align:middle;background:var(--zui-gray-200);border-radius:3px;outline:none;cursor:pointer;-webkit-appearance:none;-moz-appearance:none}:host input:disabled{cursor:not-allowed}:host input::-webkit-slider-thumb{width:var(--zui-slider-thumb-size);height:var(--zui-slider-thumb-size);background-color:var(--zui-blue);border-radius:50%;-webkit-appearance:none}:host input:disabled::-webkit-slider-thumb{background-color:var(--zui-gray)}:host input::-moz-range-thumb{width:var(--zui-slider-thumb-size);height:var(--zui-slider-thumb-size);background-color:var(--zui-blue);border:0;border-radius:50%;-moz-appearance:none}:host input:disabled::-moz-range-thumb{background-color:var(--zui-gray)}:host span{position:absolute;top:.0625rem;display:flex;width:var(--zui-slider-thumb-size);height:100%;justify-content:center;align-items:center;font-weight:600;color:#fff;pointer-events:none}`;
+export const style = css `:host .thumb-input input[type=number]{display:inline-block;width:100%;min-height:2.625rem;vertical-align:middle;padding:0 .625rem;background-color:#fff;border:.0625rem solid var(--zui-gray-200);border-radius:.25rem;font:inherit;color:inherit;transition:border 100ms ease-in-out,box-shadow 100ms ease-in-out;box-sizing:border-box;appearance:textfield}:host .thumb-input input[type=number]::-webkit-input-placeholder{color:var(--zui-gray-200)}:host .thumb-input input[type=number]::-moz-placeholder{opacity:1;color:var(--zui-gray-200)}:host .thumb-input input[type=number]:-moz-placeholder{opacity:1;color:var(--zui-gray-200)}:host .thumb-input input[type=number]:-ms-input-placeholder{color:var(--zui-gray-200)}:host .thumb-input input[type=number]:not(output):-moz-ui-invalid{box-shadow:none}:host .thumb-input input[type=number]:hover{border-color:var(--zui-gray-400)}:host .thumb-input input[type=number]:focus{border-color:var(--zui-blue-400);box-shadow:0 0 0 .0625rem var(--zui-blue-400);outline:none}:host .thumb-input input[disabled][type=number]{background-color:var(--zui-gray-100);cursor:not-allowed;color:var(--zui-gray-300)}:host .thumb-input input[disabled][type=number]:hover{border:.0625rem solid var(--zui-gray-200)}:host .thumb-input input[readonly][type=number]{outline:none}:host{--zui-slider-thumb-size: 0.875rem;--zui-slider-input-width: 8ch;position:relative;display:block;padding:calc(var(--zui-slider-thumb-size)/2) 0}:host .single-wrapper{position:relative;display:flex;height:var(--zui-slider-thumb-size);align-items:center;margin:0 calc(var(--zui-slider-thumb-size)*-1)}:host input[type=range]{width:100%;height:.25rem;margin:0;background:var(--zui-gray-200);border-radius:.1875rem;outline:none;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}:host input[type=range]::-webkit-slider-thumb{width:calc(var(--zui-slider-thumb-size)*3);height:calc(var(--zui-slider-thumb-size)*3);background:radial-gradient(circle, var(--zui-blue) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));border-radius:50%;box-shadow:none;transition:background 100ms ease-out,box-shadow 100ms ease-out;-webkit-appearance:none;appearance:none}:host input[type=range]::-webkit-slider-thumb:hover{box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]::-moz-range-thumb{width:calc(var(--zui-slider-thumb-size)*3);height:calc(var(--zui-slider-thumb-size)*3);background:radial-gradient(circle, var(--zui-blue) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));border:0;border-radius:50%;box-shadow:none;transition:background 100ms ease-out,box-shadow 100ms ease-out}:host input[type=range]::-moz-range-thumb:hover{box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]:hover::-webkit-slider-thumb{background:radial-gradient(circle, var(--zui-blue-400) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2))}:host input[type=range]:hover::-moz-range-thumb{background:radial-gradient(circle, var(--zui-blue-400) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2))}:host input[type=range]:focus::-webkit-slider-thumb{box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]:focus::-moz-range-thumb{box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]:active::-webkit-slider-thumb{background:radial-gradient(circle, var(--zui-blue-600) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]:active::-moz-range-thumb{background:radial-gradient(circle, var(--zui-blue-600) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]:disabled{cursor:not-allowed}:host input[type=range]:disabled::-webkit-slider-thumb{background:radial-gradient(circle, var(--zui-gray) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2))}:host input[type=range]:disabled::-webkit-slider-thumb:hover{box-shadow:none}:host input[type=range]:disabled::-moz-range-thumb{background:radial-gradient(circle, var(--zui-gray) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2))}:host input[type=range]:disabled::-moz-range-thumb:hover{box-shadow:none}:host .thumb-input{position:absolute;bottom:calc(var(--zui-slider-thumb-size)*2 + 0.25rem);opacity:0;z-index:10;transform:translateX(-50%);transition:opacity 100ms ease-out;pointer-events:none}:host .thumb-input--visible,:host .thumb-input:focus-within{opacity:1;pointer-events:all}:host .thumb-input input[type=number]{width:var(--zui-slider-input-width);text-align:center}:host .thumb-input input[type=number]::-webkit-inner-spin-button,:host .thumb-input input[type=number]::-webkit-outer-spin-button{appearance:none}:host .step-dots{position:absolute;top:50%;left:0;width:100%;height:0;pointer-events:none}:host .step-dots .step-dot{position:absolute;width:.375rem;height:.375rem;background-color:var(--zui-blue);border-radius:50%;transform:translate(-50%, -50%)}:host .step-dots .step-dot:first-child,:host .step-dots .step-dot:last-child{width:.125rem;height:1rem;border-radius:.125rem}:host .range-wrapper{position:relative;display:flex;height:.25rem;align-items:center;overflow:visible;margin:.3125rem calc(var(--zui-slider-thumb-size)*-1)}:host .range-wrapper input[type=range]{position:absolute;width:100%;height:var(--zui-slider-thumb-size);background:rgba(0,0,0,0);transform:translateY(-50%);pointer-events:none}@supports(-moz-appearance: none){:host .range-wrapper input[type=range]{top:50%;left:0}}:host .range-wrapper input[type=range]::-webkit-slider-runnable-track{height:.25rem;background:rgba(0,0,0,0)}:host .range-wrapper input[type=range]::-webkit-slider-thumb{margin-top:.125rem;cursor:pointer;pointer-events:all}:host .range-wrapper input[type=range]::-moz-range-track{height:.25rem;background:rgba(0,0,0,0)}:host .range-wrapper input[type=range]::-moz-range-progress{background:rgba(0,0,0,0)}:host .range-wrapper input[type=range]::-moz-range-thumb{cursor:pointer;pointer-events:all}:host .range-wrapper input[type=range]:disabled::-webkit-slider-thumb{cursor:not-allowed;pointer-events:all}:host .range-wrapper input[type=range]:disabled::-moz-range-thumb{cursor:not-allowed;pointer-events:all}:host .range-wrapper .thumb-input{bottom:calc(var(--zui-slider-thumb-size)*2 - 0.0625rem)}:host .min-max-labels{display:flex;justify-content:space-between}:host .min-max-labels .min-max-label{font-weight:600;color:var(--zui-gray-600)}:host([range]) .min-max-labels{margin-top:.3125rem}:host([disabled]){cursor:not-allowed}:host([disabled]) .range-wrapper{cursor:not-allowed}:host([disabled]) .step-dot{background-color:var(--zui-gray)}`;
 //# sourceMappingURL=zui-slider-css.js.map

package/dist/zui-slider-css.js.map

@@ -1 +1 @@
-{"version":3,"file":"zui-slider-css.js","sourceRoot":"","sources":["../src/zui-slider-css.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA,igCAAigC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const style = css`:host{--zui-slider-thumb-size: 1.875rem;display:block;padding:calc(var(--zui-slider-thumb-size)/2) 0}:host input{width:100%;height:.25rem;vertical-align:middle;background:var(--zui-gray-200);border-radius:3px;outline:none;cursor:pointer;-webkit-appearance:none;-moz-appearance:none}:host input:disabled{cursor:not-allowed}:host input::-webkit-slider-thumb{width:var(--zui-slider-thumb-size);height:var(--zui-slider-thumb-size);background-color:var(--zui-blue);border-radius:50%;-webkit-appearance:none}:host input:disabled::-webkit-slider-thumb{background-color:var(--zui-gray)}:host input::-moz-range-thumb{width:var(--zui-slider-thumb-size);height:var(--zui-slider-thumb-size);background-color:var(--zui-blue);border:0;border-radius:50%;-moz-appearance:none}:host input:disabled::-moz-range-thumb{background-color:var(--zui-gray)}:host span{position:absolute;top:.0625rem;display:flex;width:var(--zui-slider-thumb-size);height:100%;justify-content:center;align-items:center;font-weight:600;color:#fff;pointer-events:none}`;\n"]}
+{"version":3,"file":"zui-slider-css.js","sourceRoot":"","sources":["../src/zui-slider-css.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA,ggOAAggO,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const style = css`:host .thumb-input input[type=number]{display:inline-block;width:100%;min-height:2.625rem;vertical-align:middle;padding:0 .625rem;background-color:#fff;border:.0625rem solid var(--zui-gray-200);border-radius:.25rem;font:inherit;color:inherit;transition:border 100ms ease-in-out,box-shadow 100ms ease-in-out;box-sizing:border-box;appearance:textfield}:host .thumb-input input[type=number]::-webkit-input-placeholder{color:var(--zui-gray-200)}:host .thumb-input input[type=number]::-moz-placeholder{opacity:1;color:var(--zui-gray-200)}:host .thumb-input input[type=number]:-moz-placeholder{opacity:1;color:var(--zui-gray-200)}:host .thumb-input input[type=number]:-ms-input-placeholder{color:var(--zui-gray-200)}:host .thumb-input input[type=number]:not(output):-moz-ui-invalid{box-shadow:none}:host .thumb-input input[type=number]:hover{border-color:var(--zui-gray-400)}:host .thumb-input input[type=number]:focus{border-color:var(--zui-blue-400);box-shadow:0 0 0 .0625rem var(--zui-blue-400);outline:none}:host .thumb-input input[disabled][type=number]{background-color:var(--zui-gray-100);cursor:not-allowed;color:var(--zui-gray-300)}:host .thumb-input input[disabled][type=number]:hover{border:.0625rem solid var(--zui-gray-200)}:host .thumb-input input[readonly][type=number]{outline:none}:host{--zui-slider-thumb-size: 0.875rem;--zui-slider-input-width: 8ch;position:relative;display:block;padding:calc(var(--zui-slider-thumb-size)/2) 0}:host .single-wrapper{position:relative;display:flex;height:var(--zui-slider-thumb-size);align-items:center;margin:0 calc(var(--zui-slider-thumb-size)*-1)}:host input[type=range]{width:100%;height:.25rem;margin:0;background:var(--zui-gray-200);border-radius:.1875rem;outline:none;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}:host input[type=range]::-webkit-slider-thumb{width:calc(var(--zui-slider-thumb-size)*3);height:calc(var(--zui-slider-thumb-size)*3);background:radial-gradient(circle, var(--zui-blue) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));border-radius:50%;box-shadow:none;transition:background 100ms ease-out,box-shadow 100ms ease-out;-webkit-appearance:none;appearance:none}:host input[type=range]::-webkit-slider-thumb:hover{box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]::-moz-range-thumb{width:calc(var(--zui-slider-thumb-size)*3);height:calc(var(--zui-slider-thumb-size)*3);background:radial-gradient(circle, var(--zui-blue) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));border:0;border-radius:50%;box-shadow:none;transition:background 100ms ease-out,box-shadow 100ms ease-out}:host input[type=range]::-moz-range-thumb:hover{box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]:hover::-webkit-slider-thumb{background:radial-gradient(circle, var(--zui-blue-400) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2))}:host input[type=range]:hover::-moz-range-thumb{background:radial-gradient(circle, var(--zui-blue-400) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2))}:host input[type=range]:focus::-webkit-slider-thumb{box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]:focus::-moz-range-thumb{box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]:active::-webkit-slider-thumb{background:radial-gradient(circle, var(--zui-blue-600) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]:active::-moz-range-thumb{background:radial-gradient(circle, var(--zui-blue-600) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]:disabled{cursor:not-allowed}:host input[type=range]:disabled::-webkit-slider-thumb{background:radial-gradient(circle, var(--zui-gray) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2))}:host input[type=range]:disabled::-webkit-slider-thumb:hover{box-shadow:none}:host input[type=range]:disabled::-moz-range-thumb{background:radial-gradient(circle, var(--zui-gray) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2))}:host input[type=range]:disabled::-moz-range-thumb:hover{box-shadow:none}:host .thumb-input{position:absolute;bottom:calc(var(--zui-slider-thumb-size)*2 + 0.25rem);opacity:0;z-index:10;transform:translateX(-50%);transition:opacity 100ms ease-out;pointer-events:none}:host .thumb-input--visible,:host .thumb-input:focus-within{opacity:1;pointer-events:all}:host .thumb-input input[type=number]{width:var(--zui-slider-input-width);text-align:center}:host .thumb-input input[type=number]::-webkit-inner-spin-button,:host .thumb-input input[type=number]::-webkit-outer-spin-button{appearance:none}:host .step-dots{position:absolute;top:50%;left:0;width:100%;height:0;pointer-events:none}:host .step-dots .step-dot{position:absolute;width:.375rem;height:.375rem;background-color:var(--zui-blue);border-radius:50%;transform:translate(-50%, -50%)}:host .step-dots .step-dot:first-child,:host .step-dots .step-dot:last-child{width:.125rem;height:1rem;border-radius:.125rem}:host .range-wrapper{position:relative;display:flex;height:.25rem;align-items:center;overflow:visible;margin:.3125rem calc(var(--zui-slider-thumb-size)*-1)}:host .range-wrapper input[type=range]{position:absolute;width:100%;height:var(--zui-slider-thumb-size);background:rgba(0,0,0,0);transform:translateY(-50%);pointer-events:none}@supports(-moz-appearance: none){:host .range-wrapper input[type=range]{top:50%;left:0}}:host .range-wrapper input[type=range]::-webkit-slider-runnable-track{height:.25rem;background:rgba(0,0,0,0)}:host .range-wrapper input[type=range]::-webkit-slider-thumb{margin-top:.125rem;cursor:pointer;pointer-events:all}:host .range-wrapper input[type=range]::-moz-range-track{height:.25rem;background:rgba(0,0,0,0)}:host .range-wrapper input[type=range]::-moz-range-progress{background:rgba(0,0,0,0)}:host .range-wrapper input[type=range]::-moz-range-thumb{cursor:pointer;pointer-events:all}:host .range-wrapper input[type=range]:disabled::-webkit-slider-thumb{cursor:not-allowed;pointer-events:all}:host .range-wrapper input[type=range]:disabled::-moz-range-thumb{cursor:not-allowed;pointer-events:all}:host .range-wrapper .thumb-input{bottom:calc(var(--zui-slider-thumb-size)*2 - 0.0625rem)}:host .min-max-labels{display:flex;justify-content:space-between}:host .min-max-labels .min-max-label{font-weight:600;color:var(--zui-gray-600)}:host([range]) .min-max-labels{margin-top:.3125rem}:host([disabled]){cursor:not-allowed}:host([disabled]) .range-wrapper{cursor:not-allowed}:host([disabled]) .step-dot{background-color:var(--zui-gray)}`;\n"]}

package/dist/zui-slider.d.ts

@@ -1,4 +1,5 @@
 import { ZuiFormAssociatedElement } from '@zywave/zui-base';
+import { TemplateResult } from 'lit';
 /**
  * A range form control for choosing values along a slider.
  * @element zui-slider
@@ -7,30 +8,59 @@ import { ZuiFormAssociatedElement } from '@zywave/zui-base';
  * @attr {boolean} [disabled=false] - Represents whether a user can make changes to this element; if true, the value of this element will be excluded from the form submission
  * @attr {boolean} [readonly=false] - Represents whether a user can make changes to this element; the value of this element will still be included in the form submission
  * @attr {boolean} [autofocus=false] - If true, this element will be focused when connected to the document
- * @attr {number} [value=50] - Represents the value of the input. Can be set to a default value, and will reflect the value provided by the user when interactive with the control
+ * @attr {number} [value=50] - Represents the value of the input (single mode). Can be set to a default value, and will reflect the value provided by the user when interactive with the control
+ * @attr {boolean} [range=false] - Enables range mode with two thumbs for selecting a range
+ * @attr {number} [value-start=0] - Represents the start (lower) value in range mode
+ * @attr {number} [value-end=100] - Represents the end (upper) value in range mode
+ * @attr {number} [min=0] - Represents the minimum permitted value
+ * @attr {number} [max=100] - Represents the maximum permitted value
+ * @attr {number} [step=0] - Represents the stepping interval; 0 means any value is allowed
+ * @attr {boolean} [show-min-max=false] - Shows the min and max values beneath the slider
  *
  * @prop {string | null} [name=null] - The name of this element that is associated with form submission
  * @prop {boolean} [disabled=false] - Represents whether a user can make changes to this element; if true, the value of this element will be excluded from the form submission
  * @prop {boolean} [readOnly=false] - Represents whether a user can make changes to this element; the value of this element will still be included in the form submission
  * @prop {boolean} [autofocus=false] - If true, this element will be focused when connected to the document
- * @prop {number} [valueAsNumber=50] - Returns the value of the element, interpreted as one of the following, in order: A number, NaN if conversion is impossible
- * @prop {string} [value='50'] - Represents the value of the input. Can be set to a default value, and will reflect the value provided by the user when interactive with the control
- * @prop {number} [progress=50] - Determines visual placement of the slider thumb along the line
+ * @prop {number} [valueAsNumber=50] - Returns the value as a number. Invalid or non-numeric values are clamped to min; empty string (representing an in-progress edit) returns NaN
+ * @prop {string} [value='50'] - Represents the value of the input (single mode). Can be set to a default value, and will reflect the value provided by the user when interactive with the control
+ * @prop {number} [progress=50] - Determines visual placement of the slider thumb along the line (single mode)
+ * @prop {boolean} [range=false] - Enables range mode with two thumbs for selecting a range
+ * @prop {string} [valueStart='0'] - Represents the start (lower) value in range mode
+ * @prop {string} [valueEnd='100'] - Represents the end (upper) value in range mode
+ * @prop {number} [progressStart=0] - Determines visual placement of the start thumb in range mode
+ * @prop {number} [progressEnd=100] - Determines visual placement of the end thumb in range mode
+ * @prop {number} [min=0] - Represents the minimum permitted value
+ * @prop {number} [max=100] - Represents the maximum permitted value
+ * @prop {number} [step=0] - Represents the stepping interval; 0 means any value is allowed
+ * @prop {boolean} [showMinMax=false] - Shows the min and max values beneath the slider
  *
- * @cssprop [--zui-slider-thumb-size=1.875rem (30px)] - Point of contact to grab and slide to change value
+ * @cssprop [--zui-slider-thumb-size=0.875rem (14px)] - Controls the visual dot size and thumb hit-area (hit area is 3× this value)
+ * @cssprop [--zui-slider-input-width=7ch] - Width of the floating value input above each thumb
  *
- * @event {CustomEvent} change - Fires when value changes, details contain `value`
+ * @event {CustomEvent} change - Fires when value changes; in single mode detail is the value string; in range mode detail is { valueStart, valueEnd }
  */
 export declare class ZuiSlider extends ZuiFormAssociatedElement {
     #private;
+    static get styles(): (import("lit").CSSResult | import("lit").CSSResultArray)[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: Map<PropertyKey, unknown>): void;
     protected get _focusControlSelector(): string;
     protected get _formValue(): string;
     protected formResetCallback(): void;
     get value(): string;
-    set value(val: string);
+    set value(rawVal: string);
     get valueAsNumber(): number;
     /**
-     * Represents the maximum permitted value
+     * Enables range mode with two thumbs for selecting a value range
+     */
+    range: boolean;
+    get valueStart(): string;
+    set valueStart(rawVal: string);
+    get valueEnd(): string;
+    set valueEnd(rawVal: string);
+    /**
+     * Represents the minimum permitted value
      */
     min: number;
     /**
@@ -42,17 +72,13 @@ export declare class ZuiSlider extends ZuiFormAssociatedElement {
      */
     step: number;
     /**
-     * Represents that this control must be filled in for form submission
+     * Shows the min and max values beneath the slider
      */
-    noText: boolean;
+    showMinMax: boolean;
     get progress(): number;
-    static get styles(): (import("lit").CSSResult | import("lit").CSSResultArray)[];
-    connectedCallback(): void;
-    render(): import("lit-html").TemplateResult<1>;
-    private _renderText;
-    private _onInput;
-    private _onChange;
-    private _ensureValidValue;
+    get progressStart(): number;
+    get progressEnd(): number;
+    render(): TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {