draw a red line for current time on slider? no issue

[ldijkman]

Hello

my question fits better in Discussions tab (but it is not activated on this repo?)

anyone maybe has an idea how to draw a red line marker on slider for current time or a link to an example

greet luberth https://ldijkman.github.io/Electra/schedule.html https://github.com/ldijkman/randomnerd_esp32_wifi_manager/tree/main/LAB_Experiments#timed-switching

[ldijkman]

this draws a vertical red line at 50% wich is 12 o clock but it messes up the slider

<style>
    .noUi-base{
        border-left: 2px solid red;
        height: 20px;
        position:absolute;
        left: 50%;
    }
</style>

or should i add a div to .noUi-base via javascript code
position percentage of current time versus 24h

[ldijkman]

still trying created a div from script at 50% on 1st slider

https://ldijkman.github.io/Electra/schedule.html

[leongersen]

Hi Luberth,

I think the easiest way to achieve this is to fit the slider in a div with position: relative, then use another div (position: absolute; left: 50%) for the line.

[ldijkman]

to my surprise i got it a bit working

javascript adds a div class actualtime to nouibase left position percentage is based on actual time

https://ldijkman.github.io/Electra/schedule.html

[leongersen]

Okay, glad you worked it out! 👍

[ldijkman]

monday slider if actualtime in range "light on" change color to yellow else green

https://ldijkman.github.io/Electra/schedule.html

[ldijkman]

and a sunrise marker

https://ldijkman.github.io/Electra/schedule.html

[github-actions[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.