slider_form

<html>
    <head>
		<style>
			.slidecontainer {
			width: 100%;
			}

			.slider {
			-webkit-appearance: none;
			width: 100%;
			height: 15px;
			border-radius: 5px;
			background: #d3d3d3;
			outline: none;
			opacity: 0.7;
			-webkit-transition: .2s;
			transition: opacity .2s;
			}

			.slider:hover {
			opacity: 1;
			}

			.slider::-webkit-slider-thumb {
			-webkit-appearance: none;
			appearance: none;
			width: 75px;
			height: 75px;
			border-radius: 50%;
			background: #4CAF50;
			cursor: pointer;
			}

			.slider::-moz-range-thumb {
			width: 145px;
			height: 145px;
			border-radius: 50%;
			background: #4CAF50;
			cursor: pointer;
			}
		</style>
	</head>

	<body>
	<center>

	    <div style="width: 720px">
		<div style="margin-left: auto; width: 720px; margin-left: auto; align: center; font-size: 40px; font-family: verdana">
		<?php
		ini_set( 'display_errors', 'On' );
		error_reporting( E_ALL );

		include("serial.conf.php");
		$room = "$_GET[room]";
		$device = "$_GET[device]";
		$room_long_name = "$_GET[room_long_name]";
		$room_php_name = "$_GET[room_php_name]";
		$picture_name = $room_long_name . "_" . $device . ".jpg";
		//$location = "device.php?room_long_name=" . $room_long_name . "&room=" . $room . "&device=" . $device;
		$location = "device.php?room_php_name=" . $room_php_name . "&room_long_name=" . $room_long_name . "&room=" . $room . "&device=" . $device;
		echo "<img src=\"http://192.168.1.115/serial/images/$picture_name\" border=\"0\" width=\"720\" height=\"540\"></br></br>

		<form method=\"post\" action=\"$location\">
		<input type=\"submit\" value=\"on\" name=\"on\" style=\"border: 1; width: 180px; height: 93px; font-size: 32px;\"/>&nbsp;
		<input type=\"submit\" value=\"off\" name=\"off\" style=\"border: 1; width: 180px; height: 93px; font-size: 32px;\"/>&nbsp;
		<input type=\"submit\" value=\"switch\" name=\"switch\" style=\"border: 1; width: 180px; height: 93px; font-size: 32px;\"/>&nbsp;<br><br><br>
		<input type=\"range\" name=\"brightness\" min=\"10\" max=\"90\" class=\"slider\" id=\"myRange\">
		<p>Brightness: <span id=\"demo\"></span>&nbsp;<input type=\"submit\" value=\"set\" name=\"set\" style=\"border: 1; width: 180px; height: 93px; font-size: 32px;\"/></p><br>

		<script>
		var slider = document.getElementById(\"myRange\");
		var output = document.getElementById(\"demo\");
		output.innerHTML = slider.value;

		slider.oninput = function() {
		output.innerHTML = this.value;
		}
		</script>

		<input type=\"submit\" value=\"device_exit\" name=\"device_exit\" style=\"border: 1; background: url('http://192.168.1.115/serial/images/exit_device.jpg'); width: 93px; height: 93px\" />&nbsp;
		<input type=\"submit\" value=\"room_exit\" name=\"room_exit\" style=\"border: 1; background: url('http://192.168.1.115/serial/images/exit_small.jpg'); width: 180px; height: 93px\" /></br>
	</form> ";

	include("device_service.php");
	?>

		</div>
	</div>

	</center>
    </body>
</html>