Send a slider variable to php

Issue

I have a slider on my html page and I need to pass the input variable (I mean the percentage of slider, so the id) on a php variable in the same page.
I’ve tried many methods, but no one has worked.

I attach my code below. I don’t write here the style tag: ask me for it if you need.

<!DOCTYPE html>
<html>
    <body>
        <div class="container">
            <input type="range" id="my-slider" min="0" max="100" value="50" oninput="slider()">
            <div id="slider-value">0</div>
        </div>
        <script type="text/javascript">
            const mySlider = document.getElementById("my-slider");
            const sliderValue = document.getElementById("slider-value");
            function slider(){
                valPercent = (mySlider.value / mySlider.max)*100;
                mySlider.style.background = `linear-gradient(to right, #3264fe ${valPercent}%, #9c9c9c ${valPercent}%)`;
                sliderValue.textContent = mySlider.value;
            }
            slider();
        </script>
        </body>
</html>

Solution

Other way to do it is to use HTTP GET or POST requests

<!DOCTYPE html>
<html>
    <body>
    <form action="get.php" method="POST">
    <div class="container">
            <input type="range" id="my-slider" name="svalue" min="0" max="100" value="50" oninput="slider()">
            <div id="slider-value">0</div>
        </div>
    <input type="submit" value="Submit"></form>    
        <script type="text/javascript">
            const mySlider = document.getElementById("my-slider");
            const sliderValue = document.getElementById("slider-value");
            function slider(){
                valPercent = (mySlider.value / mySlider.max)*100;
                mySlider.style.background = `linear-gradient(to right, #3264fe ${valPercent}%, #9c9c9c ${valPercent}%)`;
                sliderValue.textContent = mySlider.value;
                //document.cookie=`sliderValue=${sliderValue.innerText}; expires=Never; path=\\`;
            }
            slider();


</script>

        </body>
</html>

get.php file

<?php
$myvar=$_POST["svalue"];
echo "Slide value is: " . $myvar;

?>

Answered By – Sevada 797

Answer Checked By – Timothy Miller (AngularFixing Admin)

Leave a Reply

Your email address will not be published.