Slider_Projekt_Ein.html

<!doctype html>

<head>
    <meta charset="UTF-8">
    <title>Slider</title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
            font-family: Arial, Helvetica, sans-serif;
        }

        #text1 {
            display: block;
            position: relative;
            top: 20px;
            font-size: 1.5em;
        }

        svg#slider1 {
           /*siehe .js weitere Formatierungen*/
            touch-action: none;
        }

        svg#leinwand1 {
            margin-left: 30px;
            border: 1px solid black;
            background-color: aqua;
        }
    </style>

    <script src="Slider_Script.js"></script>
    <script>
        'use strict';
        function start() {
            NameSpace_Nicolas_Slider.Modul_Allein.sliderStart(90, slider1);


            window.oninput_myslider = function (wert) {
                //Drehen des Rechtecks um seine Mitte
                rect1.setAttribute('transform', 'rotate(' + wert + ',550,350)')
            }

        }


    </script>

</head>

<body onload="start()">
    <div id="slider1_Container1">
        <input id="text1" type="text"></input>
        <!--Slider-->
        <svg id="slider1" xmlns="http://www.w3.org/2000/svg" width="1200" height="80" style="border: 4px solid fuchsia; background-color: lawngreen;">
            <text x="800" y="25" font-family="Verdana" font-size="30">
                Slider 1
            </text>
            <rect id="regler1" x="0" y="30" width="20" height="20" fill="fuchsia"></rect>
            <!--Führung des reglers-->
            <line x1="0" y1="30" x2="1800" y2="30" stroke-width="2" stroke="black" />
            <line x1="0" y1="50" x2="1800" y2="50" stroke-width="2" stroke="black" />
        </svg>
    </div>
    <svg id="leinwand1" xmlns="http://www.w3.org/2000/svg" width="1204" height="800">
        <rect id="rect1" x="300" y="200" width="500" height="300" fill="red" stroke='#000000' stroke-width='4'></rect>
    </svg>

</body>

</html>