How to use the @hpcc-js/form.Slider function in @hpcc-js/form
To help you get started, we’ve selected a few @hpcc-js/form examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
hpcc-systems / Visualization / tests / test-form / src / form.spec.ts View on Github 
.value(true),
new Button()
.name("button-test")
.value("Button Test")
]),
new TextArea()
.minHeight(64)
.rows(10)
.name("textarea-test")
.label("Textarea Test")
.value("Textarea Text")
,
new ColorInput()
.name("color-input-test")
.label("Color Input Test"),
new Slider()
.columns(data.Slider.simple.columns)
.data(data.Slider.simple.data)
]
));
break;
case Input:
break;
case InputRange:
break;
case OnOff:
break;
case Range:
break;
case Select:
break;
case TextArea:.type("number")
.value(5)
.on("change", function (w, complete) {
if (complete) {
context.refreshLocations(w);
}
})
]),
(new Slider()
.name("radius") as Slider)
.label("Location Radius")
.low(1)
.high(50)
.step(1)
.value(3),
(new Slider()
.name("age") as Slider)
.label("Age (18-100)")
.low(18)
.high(100)
.step(1)
.allowRange(true)
.value([35, 50])
])
.showSubmit(true)
.omitBlank(true)
.on("clear", function (request) {
context.clear();
}).on("click", function (request) {
context.clear();
context.refreshLocations();
const data = JSON.stringify(context.form.data());.name("zip3DistRange")
.label("Radius")
.type("number")
.value(5)
.on("change", function (w) {
context.refreshLocations(w);
})
]),
(new Slider()
.name("radius") as Slider)
.label("Location Radius")
.low(1)
.high(50)
.step(1)
.value(3),
(new Slider()
.name("age") as Slider)
.label("Age (18-100)")
.low(18)
.high(100)
.step(1)
.allowRange(true)
.value([35, 50])
])
.showSubmit(true)
.omitBlank(true)
.on("clear", function (request) {
context.clear();
}).on("click", function (request) {
context.clear();
context.refreshLocations();
const data = JSON.stringify(context.form.data());{ "source": 2, "target": 0 },
]
};
var graphData = { vertices: [], edges: [] };
rawData.nodes.forEach(function (node, idx) {
let dateStr = `${Math.floor(Math.random() * 27) + 1991}-01-01`;
graphData.vertices.push(new Vertex().text(node.name + ` (${dateStr})`).faChar(node.icon));
graphData.vertices[idx].date = new Date(dateStr).getTime();
}, graph);
rawData.links.forEach(function (link) {
graphData.edges.push(new Edge().sourceVertex(graphData.vertices[link.source]).targetVertex(graphData.vertices[link.target]).weight(link.value));
}, graph);
var graph = new Graph().data(graphData);
let slider = new Slider()
.allowRange(true)
.timePattern("%Y-%m-%d")
.tickDateFormat("%b,%Y")
.lowDatetime("1990-07-03")
.highDatetime("2018-05-24")
.step(1)
.columns(["Date/Time"])
.data([
["1990-07-03", "2018-05-24"]
]);
slider.change = function (s) {
graph.data().vertices.forEach(function (vertex) {
vertex.visible(s.data()[0][0] <= vertex.date && vertex.date <= s.data()[0][1]);
})
}
new Layered()
