@hpcc-js/form 3.4.1 → 3.4.4

package/src/Slider.ts

@@ -1,385 +1,385 @@
-import { IInput } from "@hpcc-js/api";
-import { d3Event, select as d3Select, SVGWidget } from "@hpcc-js/common";
-import { drag as d3Drag } from "d3-drag";
-import { format as d3Format } from "d3-format";
-import { scaleLinear as d3ScaleLinear } from "d3-scale";
-import { timeFormat as d3TimeFormat, timeParse as d3TimeParse } from "d3-time-format";
-
-import "../src/Slider.css";
-
-export class Slider extends SVGWidget {
-    xScale;
-
-    moveMode: "both" | "left" | "right";
-    moveStartPos: number;
-
-    prevValue;
-
-    slider;
-
-    handleLeft;
-    handleLeftPos: number = 0;
-    handleLeftStartPos: number;
-
-    handleRight;
-    handleRightPos: number = 0;
-    handleRightStartPos: number;
-
-    constructor() {
-        super();
-        IInput.call(this);
-    }
-
-    enter(domNode, element) {
-        super.enter(domNode, element);
-        this.resize({ width: this.width(), height: 50 });
-
-        this.xScale = d3ScaleLinear()
-            .clamp(true);
-
-        this.slider = element.append("g")
-            .attr("class", "slider")
-            ;
-        if (this.low() === null && this.high() === null) {
-            if (this.lowDatetime() !== null && this.highDatetime() !== null) {
-                const time_parser = d3TimeParse(this.timePattern() ? this.timePattern() : "%Q");
-                this.low(time_parser(this.lowDatetime()).getTime());
-                this.high(time_parser(this.highDatetime()).getTime());
-            }
-        }
-        this.slider.append("line")
-            .attr("class", "track")
-            .select(function () { return this.parentNode.appendChild(this.cloneNode(true)); })
-            .attr("class", "track-inset")
-            .select(function () { return this.parentNode.appendChild(this.cloneNode(true)); })
-            .attr("class", "track-overlay")
-            .call(d3Drag()
-                .on("start", () => {
-                    const event = d3Event();
-                    this.moveStartPos = event.x;
-                    this.handleLeftStartPos = this.handleLeftPos;
-                    this.handleRightStartPos = this.handleRightPos;
-                    if (this.allowRange() && this.handleLeftPos <= event.x && event.x <= this.handleRightPos) {
-                        this.moveMode = "both";
-                    } else if (Math.abs(event.x - this.handleLeftPos) < Math.abs(event.x - this.handleRightPos)) {
-                        this.moveMode = "left";
-                    } else {
-                        this.moveMode = "right";
-                    }
-                    this.moveHandleTo(event.x);
-                })
-                .on("drag", () => {
-                    this.moveHandleTo(d3Event().x);
-                })
-                .on("end", () => {
-                    this.moveHandleTo(d3Event().x);
-                    this.data([[this.xScale.invert(this.handleLeftPos), this.xScale.invert(this.handleRightPos)]]);
-                    this.checkChangedValue();
-                }));
-
-        this.slider.insert("g", ".track-overlay")
-            .attr("class", "ticks")
-            .attr("transform", `translate(0, ${this.fontSize() + (this.tickHeight() / 2)})`)
-            ;
-
-        this.handleRight = this.slider.insert("path", ".track-overlay")
-            .attr("class", "handle")
-            ;
-
-        this.handleLeft = this.slider.insert("path", ".track-overlay")
-            .attr("class", "handle")
-            ;
-    }
-
-    update(domNode, element) {
-        super.update(domNode, element);
-        const context = this;
-        this.xScale
-            .domain([this.low(), this.high()])
-            .range([0, this.width() - this.padding() * 2])
-            ;
-
-        this.slider
-            .attr("transform", "translate(" + (-this.width() / 2 + this.padding()) + "," + 0 + ")");
-
-        this.slider.selectAll("line.track,line.track-inset,line.track-overlay")
-            .attr("x1", this.xScale.range()[0])
-            .attr("x2", this.xScale.range()[1])
-            ;
-
-        const x_distance = (this.width() - (this.padding() * 2)) / (this.tickCount() - 1);
-
-        const tick_text_arr = [];
-        if (this.tickDateFormat() !== null && this.timePattern() !== null) {
-            const Q_parser = d3TimeParse("%Q");
-            const time_formatter = d3TimeFormat(this.tickDateFormat());
-            const time_segment = (this.high() - this.low()) / (this.tickCount() - 1);
-            for (let i = 0; i < this.tickCount(); i++) {
-                const date_to_parse = "" + (this.low() + (time_segment * i));
-                const parsed_date = Q_parser(date_to_parse);
-                tick_text_arr.push(time_formatter(parsed_date));
-            }
-        } else {
-            const value_formatter = d3Format(this.tickValueFormat());
-            const value_segment = (this.high() - this.low()) / (this.tickCount() - 1);
-            for (let i = 0; i < this.tickCount(); i++) {
-                const tick_value = this.low() + (value_segment * i);
-                tick_text_arr.push(value_formatter(tick_value));
-            }
-        }
-        const tickText = this.slider.selectAll("g.tick").data(tick_text_arr);
-        const tickTextEnter = tickText.enter().append("g").attr("class", "tick");
-
-        tickTextEnter.append("text").attr("class", "tick-text");
-        tickTextEnter.append("line").attr("class", "tick-line");
-        tickTextEnter
-            .merge(tickText)
-            .each(function (d, i) {
-                const x = x_distance * i;
-
-                d3Select(this).select("text.tick-text")
-                    .style("font-size", context.fontSize())
-                    .attr("x", function () {
-                        if (i === 0) return x - 2;
-                        return i === context.tickCount() - 1 ? x + 2 : x;
-                    })
-                    .attr("y", context.tickHeight() + (context.tickOffset() / 2) + context.fontSize())
-                    .attr("text-basline", "text-before-edge")
-                    .attr("text-anchor", function () {
-                        if (i === 0) return "start";
-                        return i === context.tickCount() - 1 ? "end" : "middle";
-                    })
-                    .text(() => d)
-                    ;
-
-                d3Select(this).select("line.tick-line")
-                    .attr("x1", x)
-                    .attr("x2", x)
-                    .attr("y1", context.tickOffset() - 1)
-                    .attr("y2", context.tickOffset() + context.tickHeight())
-                    .style("stroke", "#000")
-                    .style("stroke-width", 1)
-                    ;
-            });
-        this.slider.node().appendChild(this.handleRight.node());
-        this.slider.node().appendChild(this.handleLeft.node());
-        this.handleLeftPos = this.lowPos();
-        this.handleRightPos = this.highPos();
-        this.updateHandles();
-        this.checkChangedValue();
-    }
-
-    checkChangedValue() {
-        if (this.prevValue !== this.value() && typeof this.prevValue !== "undefined") {
-            this.change(this);
-        }
-        this.prevValue = this.value();
-    }
-
-    updateHandles() {
-        this.handleLeft
-            .attr("transform", `translate(${this.handleLeftPos}, -28)`)
-            .attr("d", (d) => this.handlePath("l"))
-            ;
-        this.handleRight
-            .attr("transform", `translate(${this.handleRightPos}, -28)`)
-            .attr("d", (d) => this.handlePath("r"))
-            ;
-    }
-
-    lowPos(): number {
-        let data = [[this.low(), this.high()]];
-        if (this.data().length > 0 && typeof this.data()[0][0] === "number" && typeof this.data()[0][1] === "number") {
-            data = this.data();
-        }
-        return this.xScale(data[0][0]);
-    }
-
-    highPos(): number {
-        let data = [[this.low(), this.high()]];
-        if (this.data().length > 0 && typeof this.data()[0][0] === "number" && typeof this.data()[0][1] === "number") {
-            data = this.data();
-        }
-        return this.xScale(data[0][this.allowRange() ? 1 : 0]);
-    }
-
-    moveHandleTo(pos) {
-        if (this.allowRange()) {
-            switch (this.moveMode) {
-                case "both":
-                    this.handleLeftPos = this.handleLeftStartPos + pos - this.moveStartPos;
-                    this.handleRightPos = this.handleRightStartPos + pos - this.moveStartPos;
-                    break;
-                case "left":
-                    this.handleLeftPos = pos;
-                    if (this.handleLeftPos > this.handleRightPos) {
-                        this.handleRightPos = this.handleLeftPos;
-                    }
-                    break;
-                case "right":
-                    this.handleRightPos = pos;
-                    if (this.handleRightPos < this.handleLeftPos) {
-                        this.handleLeftPos = this.handleRightPos;
-                    }
-                    break;
-            }
-        } else {
-            this.handleLeftPos = this.handleRightPos = pos;
-        }
-
-        this.handleLeftPos = this.constrain(this.handleLeftPos);
-        this.handleRightPos = this.constrain(this.handleRightPos);
-        this.value(this.allowRange() ? [this.xScale.invert(this.handleLeftPos), this.xScale.invert(this.handleRightPos)] : this.xScale.invert(this.handleLeftPos));
-        this.updateHandles();
-    }
-
-    constrain(pos: number): number {
-        const range = this.xScale.range();
-        if (pos < range[0]) pos = range[0];
-        if (pos > range[1]) pos = range[1];
-        return this.nearestStep(pos);
-    }
-
-    nearestStep(pos) {
-        const value = this.xScale.invert(pos);
-        return this.xScale(this.low() + Math.round((value - this.low()) / this.step()) * this.step());
-    }
-
-    handlePath = function (d) {
-        const e = +(d === "r");
-        const x = e ? 1 : -1;
-        const xOffset = this.allowRange() ? 0.5 : 0.0;
-        const y = 18;
-        let retVal = "M" + (xOffset * x) + "," + y +
-            "A6,6 0 0 " + e + " " + (6.5 * x) + "," + (y + 6) +
-            "V" + (2 * y - 6) +
-            "A6,6 0 0 " + e + " " + (xOffset * x) + "," + (2 * y)
-            ;
-        if (this.allowRange()) {
-            retVal += "Z" +
-                "M" + (2.5 * x) + "," + (y + 8) +
-                "V" + (2 * y - 8) +
-                "M" + (4.5 * x) + "," + (y + 8) +
-                "V" + (2 * y - 8)
-                ;
-        } else {
-            retVal += "M" + (1 * x) + "," + (y + 8) +
-                "V" + (2 * y - 8)
-                ;
-        }
-        return retVal;
-    };
-
-}
-Slider.prototype._class += " form_Slider";
-Slider.prototype.implements(IInput.prototype);
-
-export interface Slider {
-    //  IInput  ---
-    name(): string;
-    name(_: string): this;
-    change(_: Slider): void;
-
-    //  Properties ---
-    padding(): number;
-    padding(_: number): this;
-    fontSize(): number;
-    fontSize(_: number): this;
-    fontFamily(): string;
-    fontFamily(_: string): this;
-    fontColor(): string;
-    fontColor(_: string): this;
-    allowRange(): boolean;
-    allowRange(_: boolean): this;
-    low(): number;
-    low(_: number): this;
-    high(): number;
-    high(_: number): this;
-    step(): number;
-    step(_: number): this;
-    lowDatetime(): string;
-    lowDatetime(_: string): this;
-    highDatetime(): string;
-    highDatetime(_: string): this;
-    stepDatetime(): number;
-    stepDatetime(_: number): this;
-    selectionLabel(): string;
-    selectionLabel(_: string): this;
-    label(): string;
-    label(_: string): this;
-    value(): any;
-    value(_: any): this;
-    validate(): string;
-    validate(_: string): this;
-    tickCount(): number;
-    tickCount(_: number): this;
-    tickOffset(): number;
-    tickOffset(_: number): this;
-    tickHeight(): number;
-    tickHeight(_: number): this;
-    tickDateFormat(): string;
-    tickDateFormat(_: string): this;
-    tickValueFormat(): string;
-    tickValueFormat(_: string): this;
-    timePattern(): string;
-    timePattern(_: string): this;
-
-    padding_exists(): boolean;
-    fontSize_exists(): boolean;
-    fontFamily_exists(): boolean;
-    fontColor_exists(): boolean;
-    allowRange_exists(): boolean;
-    low_exists(): boolean;
-    step_exists(): boolean;
-    high_exists(): boolean;
-    selectionLabel_exists(): boolean;
-    name_exists(): boolean;
-    label_exists(): boolean;
-    value_exists(): boolean;
-    validate_exists(): boolean;
-}
-
-Slider.prototype.publish("padding", 16, "number", "Outer Padding", null, { tags: ["Basic"] });
-Slider.prototype.publish("fontSize", 12, "number", "Font Size", null, { tags: ["Basic"] });
-Slider.prototype.publish("fontFamily", null, "string", "Font Name", null, { tags: ["Basic"] });
-Slider.prototype.publish("fontColor", null, "html-color", "Font Color", null, { tags: ["Basic"] });
-
-Slider.prototype.publish("allowRange", false, "boolean", "Allow Range Selection", null, { tags: ["Intermediate"] });
-Slider.prototype.publish("low", null, "number", "Low", null, { tags: ["Intermediate"] });
-Slider.prototype.publish("high", null, "number", "High", null, { tags: ["Intermediate"] });
-Slider.prototype.publish("step", 10, "number", "Step", null, { tags: ["Intermediate"] });
-Slider.prototype.publish("lowDatetime", null, "string", "Low", null, { tags: ["Intermediate"] });
-Slider.prototype.publish("highDatetime", null, "string", "High", null, { tags: ["Intermediate"] });
-Slider.prototype.publish("selectionLabel", "", "string", "Selection Label", null, { tags: ["Intermediate"] });
-
-Slider.prototype.publish("timePattern", "%Y-%m-%d", "string");
-
-Slider.prototype.publish("tickCount", 10, "number");
-Slider.prototype.publish("tickOffset", 5, "number");
-Slider.prototype.publish("tickHeight", 8, "number");
-Slider.prototype.publish("tickDateFormat", null, "string");
-Slider.prototype.publish("tickValueFormat", ",.0f", "string");
-
-const name = Slider.prototype.name;
-Slider.prototype.name = function (_?: any): any {
-    const retVal = name.apply(this, arguments);
-    if (arguments.length) {
-        const val = _ instanceof Array ? _ : [_];
-        SVGWidget.prototype.columns.call(this, val);
-    }
-    return retVal;
-};
-
-const value = Slider.prototype.value;
-Slider.prototype.value = function (_?: any): any {
-    const retVal = value.apply(this, arguments);
-    if (!arguments.length) {
-        if (!this.allowRange()) {
-            return SVGWidget.prototype.data.call(this)[0][0];
-        }
-        return SVGWidget.prototype.data.call(this)[0];
-    } else {
-        SVGWidget.prototype.data.call(this, [this.allowRange() ? _ : [_, _]]);
-    }
-    return retVal;
-};
+import { IInput } from "@hpcc-js/api";
+import { d3Event, select as d3Select, SVGWidget } from "@hpcc-js/common";
+import { drag as d3Drag } from "d3-drag";
+import { format as d3Format } from "d3-format";
+import { scaleLinear as d3ScaleLinear } from "d3-scale";
+import { timeFormat as d3TimeFormat, timeParse as d3TimeParse } from "d3-time-format";
+
+import "../src/Slider.css";
+
+export class Slider extends SVGWidget {
+    xScale;
+
+    moveMode: "both" | "left" | "right";
+    moveStartPos: number;
+
+    prevValue;
+
+    slider;
+
+    handleLeft;
+    handleLeftPos: number = 0;
+    handleLeftStartPos: number;
+
+    handleRight;
+    handleRightPos: number = 0;
+    handleRightStartPos: number;
+
+    constructor() {
+        super();
+        IInput.call(this);
+    }
+
+    enter(domNode, element) {
+        super.enter(domNode, element);
+        this.resize({ width: this.width(), height: 50 });
+
+        this.xScale = d3ScaleLinear()
+            .clamp(true);
+
+        this.slider = element.append("g")
+            .attr("class", "slider")
+            ;
+        if (this.low() === null && this.high() === null) {
+            if (this.lowDatetime() !== null && this.highDatetime() !== null) {
+                const time_parser = d3TimeParse(this.timePattern() ? this.timePattern() : "%Q");
+                this.low(time_parser(this.lowDatetime()).getTime());
+                this.high(time_parser(this.highDatetime()).getTime());
+            }
+        }
+        this.slider.append("line")
+            .attr("class", "track")
+            .select(function () { return this.parentNode.appendChild(this.cloneNode(true)); })
+            .attr("class", "track-inset")
+            .select(function () { return this.parentNode.appendChild(this.cloneNode(true)); })
+            .attr("class", "track-overlay")
+            .call(d3Drag()
+                .on("start", () => {
+                    const event = d3Event();
+                    this.moveStartPos = event.x;
+                    this.handleLeftStartPos = this.handleLeftPos;
+                    this.handleRightStartPos = this.handleRightPos;
+                    if (this.allowRange() && this.handleLeftPos <= event.x && event.x <= this.handleRightPos) {
+                        this.moveMode = "both";
+                    } else if (Math.abs(event.x - this.handleLeftPos) < Math.abs(event.x - this.handleRightPos)) {
+                        this.moveMode = "left";
+                    } else {
+                        this.moveMode = "right";
+                    }
+                    this.moveHandleTo(event.x);
+                })
+                .on("drag", () => {
+                    this.moveHandleTo(d3Event().x);
+                })
+                .on("end", () => {
+                    this.moveHandleTo(d3Event().x);
+                    this.data([[this.xScale.invert(this.handleLeftPos), this.xScale.invert(this.handleRightPos)]]);
+                    this.checkChangedValue();
+                }));
+
+        this.slider.insert("g", ".track-overlay")
+            .attr("class", "ticks")
+            .attr("transform", `translate(0, ${this.fontSize() + (this.tickHeight() / 2)})`)
+            ;
+
+        this.handleRight = this.slider.insert("path", ".track-overlay")
+            .attr("class", "handle")
+            ;
+
+        this.handleLeft = this.slider.insert("path", ".track-overlay")
+            .attr("class", "handle")
+            ;
+    }
+
+    update(domNode, element) {
+        super.update(domNode, element);
+        const context = this;
+        this.xScale
+            .domain([this.low(), this.high()])
+            .range([0, this.width() - this.padding() * 2])
+            ;
+
+        this.slider
+            .attr("transform", "translate(" + (-this.width() / 2 + this.padding()) + "," + 0 + ")");
+
+        this.slider.selectAll("line.track,line.track-inset,line.track-overlay")
+            .attr("x1", this.xScale.range()[0])
+            .attr("x2", this.xScale.range()[1])
+            ;
+
+        const x_distance = (this.width() - (this.padding() * 2)) / (this.tickCount() - 1);
+
+        const tick_text_arr = [];
+        if (this.tickDateFormat() !== null && this.timePattern() !== null) {
+            const Q_parser = d3TimeParse("%Q");
+            const time_formatter = d3TimeFormat(this.tickDateFormat());
+            const time_segment = (this.high() - this.low()) / (this.tickCount() - 1);
+            for (let i = 0; i < this.tickCount(); i++) {
+                const date_to_parse = "" + (this.low() + (time_segment * i));
+                const parsed_date = Q_parser(date_to_parse);
+                tick_text_arr.push(time_formatter(parsed_date));
+            }
+        } else {
+            const value_formatter = d3Format(this.tickValueFormat());
+            const value_segment = (this.high() - this.low()) / (this.tickCount() - 1);
+            for (let i = 0; i < this.tickCount(); i++) {
+                const tick_value = this.low() + (value_segment * i);
+                tick_text_arr.push(value_formatter(tick_value));
+            }
+        }
+        const tickText = this.slider.selectAll("g.tick").data(tick_text_arr);
+        const tickTextEnter = tickText.enter().append("g").attr("class", "tick");
+
+        tickTextEnter.append("text").attr("class", "tick-text");
+        tickTextEnter.append("line").attr("class", "tick-line");
+        tickTextEnter
+            .merge(tickText)
+            .each(function (d, i) {
+                const x = x_distance * i;
+
+                d3Select(this).select("text.tick-text")
+                    .style("font-size", context.fontSize())
+                    .attr("x", function () {
+                        if (i === 0) return x - 2;
+                        return i === context.tickCount() - 1 ? x + 2 : x;
+                    })
+                    .attr("y", context.tickHeight() + (context.tickOffset() / 2) + context.fontSize())
+                    .attr("text-basline", "text-before-edge")
+                    .attr("text-anchor", function () {
+                        if (i === 0) return "start";
+                        return i === context.tickCount() - 1 ? "end" : "middle";
+                    })
+                    .text(() => d)
+                    ;
+
+                d3Select(this).select("line.tick-line")
+                    .attr("x1", x)
+                    .attr("x2", x)
+                    .attr("y1", context.tickOffset() - 1)
+                    .attr("y2", context.tickOffset() + context.tickHeight())
+                    .style("stroke", "#000")
+                    .style("stroke-width", 1)
+                    ;
+            });
+        this.slider.node().appendChild(this.handleRight.node());
+        this.slider.node().appendChild(this.handleLeft.node());
+        this.handleLeftPos = this.lowPos();
+        this.handleRightPos = this.highPos();
+        this.updateHandles();
+        this.checkChangedValue();
+    }
+
+    checkChangedValue() {
+        if (this.prevValue !== this.value() && typeof this.prevValue !== "undefined") {
+            this.change(this);
+        }
+        this.prevValue = this.value();
+    }
+
+    updateHandles() {
+        this.handleLeft
+            .attr("transform", `translate(${this.handleLeftPos}, -28)`)
+            .attr("d", (d) => this.handlePath("l"))
+            ;
+        this.handleRight
+            .attr("transform", `translate(${this.handleRightPos}, -28)`)
+            .attr("d", (d) => this.handlePath("r"))
+            ;
+    }
+
+    lowPos(): number {
+        let data = [[this.low(), this.high()]];
+        if (this.data().length > 0 && typeof this.data()[0][0] === "number" && typeof this.data()[0][1] === "number") {
+            data = this.data();
+        }
+        return this.xScale(data[0][0]);
+    }
+
+    highPos(): number {
+        let data = [[this.low(), this.high()]];
+        if (this.data().length > 0 && typeof this.data()[0][0] === "number" && typeof this.data()[0][1] === "number") {
+            data = this.data();
+        }
+        return this.xScale(data[0][this.allowRange() ? 1 : 0]);
+    }
+
+    moveHandleTo(pos) {
+        if (this.allowRange()) {
+            switch (this.moveMode) {
+                case "both":
+                    this.handleLeftPos = this.handleLeftStartPos + pos - this.moveStartPos;
+                    this.handleRightPos = this.handleRightStartPos + pos - this.moveStartPos;
+                    break;
+                case "left":
+                    this.handleLeftPos = pos;
+                    if (this.handleLeftPos > this.handleRightPos) {
+                        this.handleRightPos = this.handleLeftPos;
+                    }
+                    break;
+                case "right":
+                    this.handleRightPos = pos;
+                    if (this.handleRightPos < this.handleLeftPos) {
+                        this.handleLeftPos = this.handleRightPos;
+                    }
+                    break;
+            }
+        } else {
+            this.handleLeftPos = this.handleRightPos = pos;
+        }
+
+        this.handleLeftPos = this.constrain(this.handleLeftPos);
+        this.handleRightPos = this.constrain(this.handleRightPos);
+        this.value(this.allowRange() ? [this.xScale.invert(this.handleLeftPos), this.xScale.invert(this.handleRightPos)] : this.xScale.invert(this.handleLeftPos));
+        this.updateHandles();
+    }
+
+    constrain(pos: number): number {
+        const range = this.xScale.range();
+        if (pos < range[0]) pos = range[0];
+        if (pos > range[1]) pos = range[1];
+        return this.nearestStep(pos);
+    }
+
+    nearestStep(pos) {
+        const value = this.xScale.invert(pos);
+        return this.xScale(this.low() + Math.round((value - this.low()) / this.step()) * this.step());
+    }
+
+    handlePath = function (d) {
+        const e = +(d === "r");
+        const x = e ? 1 : -1;
+        const xOffset = this.allowRange() ? 0.5 : 0.0;
+        const y = 18;
+        let retVal = "M" + (xOffset * x) + "," + y +
+            "A6,6 0 0 " + e + " " + (6.5 * x) + "," + (y + 6) +
+            "V" + (2 * y - 6) +
+            "A6,6 0 0 " + e + " " + (xOffset * x) + "," + (2 * y)
+            ;
+        if (this.allowRange()) {
+            retVal += "Z" +
+                "M" + (2.5 * x) + "," + (y + 8) +
+                "V" + (2 * y - 8) +
+                "M" + (4.5 * x) + "," + (y + 8) +
+                "V" + (2 * y - 8)
+                ;
+        } else {
+            retVal += "M" + (1 * x) + "," + (y + 8) +
+                "V" + (2 * y - 8)
+                ;
+        }
+        return retVal;
+    };
+
+}
+Slider.prototype._class += " form_Slider";
+Slider.prototype.implements(IInput.prototype);
+
+export interface Slider {
+    //  IInput  ---
+    name(): string;
+    name(_: string): this;
+    change(_: Slider): void;
+
+    //  Properties ---
+    padding(): number;
+    padding(_: number): this;
+    fontSize(): number;
+    fontSize(_: number): this;
+    fontFamily(): string;
+    fontFamily(_: string): this;
+    fontColor(): string;
+    fontColor(_: string): this;
+    allowRange(): boolean;
+    allowRange(_: boolean): this;
+    low(): number;
+    low(_: number): this;
+    high(): number;
+    high(_: number): this;
+    step(): number;
+    step(_: number): this;
+    lowDatetime(): string;
+    lowDatetime(_: string): this;
+    highDatetime(): string;
+    highDatetime(_: string): this;
+    stepDatetime(): number;
+    stepDatetime(_: number): this;
+    selectionLabel(): string;
+    selectionLabel(_: string): this;
+    label(): string;
+    label(_: string): this;
+    value(): any;
+    value(_: any): this;
+    validate(): string;
+    validate(_: string): this;
+    tickCount(): number;
+    tickCount(_: number): this;
+    tickOffset(): number;
+    tickOffset(_: number): this;
+    tickHeight(): number;
+    tickHeight(_: number): this;
+    tickDateFormat(): string;
+    tickDateFormat(_: string): this;
+    tickValueFormat(): string;
+    tickValueFormat(_: string): this;
+    timePattern(): string;
+    timePattern(_: string): this;
+
+    padding_exists(): boolean;
+    fontSize_exists(): boolean;
+    fontFamily_exists(): boolean;
+    fontColor_exists(): boolean;
+    allowRange_exists(): boolean;
+    low_exists(): boolean;
+    step_exists(): boolean;
+    high_exists(): boolean;
+    selectionLabel_exists(): boolean;
+    name_exists(): boolean;
+    label_exists(): boolean;
+    value_exists(): boolean;
+    validate_exists(): boolean;
+}
+
+Slider.prototype.publish("padding", 16, "number", "Outer Padding", null, { tags: ["Basic"] });
+Slider.prototype.publish("fontSize", 12, "number", "Font Size", null, { tags: ["Basic"] });
+Slider.prototype.publish("fontFamily", null, "string", "Font Name", null, { tags: ["Basic"] });
+Slider.prototype.publish("fontColor", null, "html-color", "Font Color", null, { tags: ["Basic"] });
+
+Slider.prototype.publish("allowRange", false, "boolean", "Allow Range Selection", null, { tags: ["Intermediate"] });
+Slider.prototype.publish("low", null, "number", "Low", null, { tags: ["Intermediate"] });
+Slider.prototype.publish("high", null, "number", "High", null, { tags: ["Intermediate"] });
+Slider.prototype.publish("step", 10, "number", "Step", null, { tags: ["Intermediate"] });
+Slider.prototype.publish("lowDatetime", null, "string", "Low", null, { tags: ["Intermediate"] });
+Slider.prototype.publish("highDatetime", null, "string", "High", null, { tags: ["Intermediate"] });
+Slider.prototype.publish("selectionLabel", "", "string", "Selection Label", null, { tags: ["Intermediate"] });
+
+Slider.prototype.publish("timePattern", "%Y-%m-%d", "string");
+
+Slider.prototype.publish("tickCount", 10, "number");
+Slider.prototype.publish("tickOffset", 5, "number");
+Slider.prototype.publish("tickHeight", 8, "number");
+Slider.prototype.publish("tickDateFormat", null, "string");
+Slider.prototype.publish("tickValueFormat", ",.0f", "string");
+
+const name = Slider.prototype.name;
+Slider.prototype.name = function (_?: any): any {
+    const retVal = name.apply(this, arguments);
+    if (arguments.length) {
+        const val = _ instanceof Array ? _ : [_];
+        SVGWidget.prototype.columns.call(this, val);
+    }
+    return retVal;
+};
+
+const value = Slider.prototype.value;
+Slider.prototype.value = function (_?: any): any {
+    const retVal = value.apply(this, arguments);
+    if (!arguments.length) {
+        if (!this.allowRange()) {
+            return SVGWidget.prototype.data.call(this)[0][0];
+        }
+        return SVGWidget.prototype.data.call(this)[0];
+    } else {
+        SVGWidget.prototype.data.call(this, [this.allowRange() ? _ : [_, _]]);
+    }
+    return retVal;
+};