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 | 3x 25x 25x 25x 25x 25x 25x 25x 25x 25x 25x 25x 25x 25x 25x 25x 25x 25x 25x 12x 25x 25x 25x 1x 24x 25x 25x 25x 25x | import { createElement } from "./utils"; export const buildSlider = ({ namespace = "picobel", min = 0, max = 100, value = 0, step = false, index = 0, label = "slider" }) => { 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`); progress.setAttribute("id", inputId); progress.setAttribute("type", "range"); progress.setAttribute("min", min); progress.setAttribute("max", max); progress.setAttribute("value", value); if (step) { progress.setAttribute("step", step); } 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; }; |