Salut la compagnie!

Encore un petit souci relatif à mon projet.
Je crois que je devrais un peu mieux m'informer concernant le javascript car je pourrais répondre tout seul avec un peu de temps. Mais faute de temps, je m'en remets à vous, si cela ne vous dérange pas

Alors voilà, ayant récupéré un plugin sur codepen.io, je me retrouve un peu perdu quant à la manière de récupérer la valeur de mon colored slider.
J'ai alors ajouté une fonction dans le code javascript déjà établi pour tenter de la récupérer par une manière du langage java appris l'année passée avec l'école.

Voici l'étendue de mon code html :

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<?php
session_start();
 
$hostname='localhost';
$username='root';
$sqlpassword='';
$conn = new PDO("mysql:host=$hostname;dbname=cocoon;charset=utf8mb4",$username,$sqlpassword);
 
if(isset($_POST['Connexion'])){
    $email= $_POST["email"];
    $password= $_POST["password"];
}
?>
 
<html>
    <head>
        <title>Cocoon - Connexion</title>
        <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <link rel="stylesheet" href="css/colored_slider.css">
                <link rel="stylesheet" href="css/principal.css">
                  <link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>
                   <meta http-equiv="page-enter" content="revealtrans(duration=4.0, transition=14)">
 
 
 
 
    </head>
    <body>
    <hey_reduced2>How do you feel now?</hey_reduced2>
 
        <div class= centered_slider>
            <div id="coloredSlider"></div>
        </div>
 
    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script type="text/javascript" src="slider_color.js"></script>
    </body>
</html>

Et voici l'étendue de mon code javascript :
L'ajout de la function getRange(); est de moi mais je ne crois pas son efficacité.

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
function getTheColor( colorVal ) {
  	var theColor = "";
  	if ( colorVal < 50 ) {
			    myRed = 255;
			    myGreen = parseInt( ( ( colorVal * 2 ) * 255 ) / 100 );
		  }
	  else 	{
			    myRed = parseInt( ( ( 100 - colorVal ) * 2 ) * 255 / 100 );
			    myGreen = 255;
		  }
	  theColor = "rgb(" + myRed + "," + myGreen + ",0)"; 
  	return( theColor ); 
}
 
function refreshSwatch() {
	var coloredSlider = $( "#coloredSlider" ).slider( "value" ),
	myColor = getTheColor( coloredSlider );
 
	$( "#coloredSlider .ui-slider-range" ).css( "background-color", myColor );
 
	$( "#coloredSlider .ui-state-default, .ui-widget-content .ui-state-default" ).css( "background-color", myColor );
}
 
$(function() {
	  $( "#coloredSlider" ).slider({
		    orientation: "horizontal",
		    range: "min",
		    max: 100,
		    value: 0,
		    slide: refreshSwatch,
		    change: refreshSwatch
	  });
 
});
 
function getRange() {
    var range = $( "#coloredSlider" ).slider( "value" );
    return(range);
}
Alors comment pourrais afficher la valeur choisie par l'utilisateur en temps réelle et la récupérer pour l'envoyer à une bdd. (Je sais comment l'envoyer)

Merci d'avance et une excellente soirée à vous!