How to use a slider to change CSS for addMarkedTimespan()

Scheduler
#1

I have several addMarkedTimespan() timelines in my scheduler, across different time periods.

 //add other hour time markers as per Sev's berth application timeline
    scheduler.addMarkedTimespan({
        start_date: new Date(new Date().setHours(new Date().getHours() + 24)),
        end_date: new Date(new Date().setHours(new Date().getHours() + 25)),
        css: "TimeMarker24"
    });
    scheduler.addMarkedTimespan({
        start_date: new Date(new Date().setHours(new Date().getHours() + 48)),
        end_date: new Date(new Date().setHours(new Date().getHours() + 49)),
        css: "TimeMarker48"
    });
    scheduler.addMarkedTimespan({
        start_date: new Date(new Date().setHours(new Date().getHours() + 72)),
        end_date: new Date(new Date().setHours(new Date().getHours() + 73)),
        css: "TimeMarker72"
    });

Each of those CSS properties refers to variations of each timeline, such as changing the colour and styles:

.TimeMarker24 {
	box-sizing: border-box;
	border-left: 2px dotted orange;  //<-- some timelines are solid, dotted or colors
	opacity: 0.5;
	z-index: 2 !important;
}

I want to give the ability to use a slider (DHTMLX Suite or javascript standard), to manipulate the CSS above, such as the thickness of the lines - from 0px to 10px

So far I’ve managed to display a slider of my own making:

<style>
    .slidecontainer {
                width: 100px; /* Width of the outside container */
            }

            /* The slider itself */
            .slider {
                -webkit-appearance: none; /* Override default CSS styles */
                appearance: none;
                width: 100%; /* Full-width */
                height: 15px; /* Specified height */
                background: #d3d3d3; /* Grey background */
                outline: none; /* Remove outline */
                opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
                -webkit-transition: .2s; /* 0.2 seconds transition on hover */
                transition: opacity .2s;
            }

            /* Mouse-over effects */
            .slider:hover {
                opacity: 1; /* Fully shown on mouse-over */
            }

            /* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
            .slider::-webkit-slider-thumb {
                -webkit-appearance: none; /* Override default look */
                appearance: none;
                width: 20px; /* Set a specific slider handle width */
                height: 20px; /* Slider handle height */
                background: #04AA6D; /* Green background */
                cursor: pointer; /* Cursor on hover */
            }
<style>

<body onload="init();" oncontextmenu="return false;">
    <div class="slidecontainer">
        <pre>Time marker width: <input type="range" min="0" max="10" value="2" class="slider" id="timeslider" onchange="sliderChanged(this.value)"></pre>
    </div>

This is as far as I got:

<script>
    function sliderChanged(sliderval) {
        var markers = document.getElementsByClassName("TimeMarker");    //gets all timemarkers
        if (markers.length > 0) {
            for (var i = 0; i < markers.length; i++) {
                var editCSS = document.createElement('style')
                editCSS.innerHTML = ".border-left: " + sliderval.toString() + "px;"
            }
        }
    }
</script>

The script gets hit, but the markers variable is always ZERO.

I suspect because the CSSs are not showing up in the DOM as I cannot “find them” using the normal browser’s style inspector via F12

How can I “find” the CSSs for the addMarkedTimespan() method so I can alter the box-sizing style element?

Any ideas?

Thanks

#2

Hello,
You can add an additional class to each marker, for example marker--configurable:

scheduler.addMarkedTimespan({
    start_date: new Date(new Date().setHours(new Date().getHours() + 24)),
    end_date: new Date(new Date().setHours(new Date().getHours() + 25)),
    css: "TimeMarker24 marker--configurable"
});
...

The function to change the border-left-width of all marker--configurable markers might look like this:

function sliderChanged(sliderval) {
    let style = document.querySelector(".marker-modifier");
    if(!style){
        style = document.createElement("style");
        style.className = "marker-modifier";
        document.head.appendChild(style);
    }
    let resultStyle = `
        .marker--configurable{
            border-left-width: ${sliderval.toString()}px !important;
            box-sizing: border-box !important;
        }
    `;
    style.innerHTML = resultStyle;
}

Here is an example in the snippet: https://snippet.dhtmlx.com/ifbz7c4h.