All files / markup slider.js

100% Statements 29/29
63.63% Branches 7/11
100% Functions 1/1
100% Lines 29/29

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;
};