Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 | 10x 35x 35x 35x 35x 35x 35x 35x 35x 35x 35x 35x 35x 35x 35x 35x 35x 35x 35x 17x 35x 35x 35x 1x 34x 35x 35x 35x 35x | import { createElement } from "./utils";
type SliderOptions = {
namespace: string;
min: number;
max: number;
value: number;
step?: number | boolean;
index?: number;
label?: string | HTMLElement;
};
export const buildSlider = ({
namespace = "picobel",
min = 0,
max = 100,
value = 0,
step = false,
index = 0,
label = "slider"
}: SliderOptions) => {
const container = createElement("div", namespace);
// Create a container element to hold all the parts
const wrapper = createElement("div", `${namespace}-slider__wrapper`);
const replacement = createElement(
"div",
`${namespace}-slider__replacement`
);
// Create a background div
const background = createElement("div", `${namespace}-slider__background`);
// Add the background to the container
replacement.appendChild(background);
// Create a progress indicator
const progressIndicator = createElement(
"div",
`${namespace}-slider__indicator`
);
replacement.appendChild(progressIndicator);
// Create a "playhead"
const playhead = createElement("div", `${namespace}-slider__playhead`);
replacement.appendChild(playhead);
wrapper.appendChild(replacement);
const inputId = `${namespace}-slider__range--${index}`;
// Create an (invisible) input (html range)
const progress = createElement("input", `${namespace}-slider__range`) as HTMLInputElement;
progress.setAttribute("id", inputId);
progress.setAttribute("type", "range");
progress.setAttribute("min", min.toString());
progress.setAttribute("max", max.toString());
progress.setAttribute("value", value.toString());
if (step) {
progress.setAttribute("step", step.toString());
}
wrapper.appendChild(progress);
// Create a label
const inputLabel = createElement("label", `${namespace}-label`);
if (typeof label === "string") {
inputLabel.innerHTML = label;
} else {
inputLabel.appendChild(label);
}
inputLabel.setAttribute("for", inputId);
container.appendChild(inputLabel);
container.appendChild(wrapper);
return container;
};
|