Récupérer valeur de mon slider

**FoxStyled** · 18/12/2016, 16h37

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!

**NoSmoking** · 19/12/2016, 19h08

Bonjour,
tout se passe dans la propriété slide/change en l’occurrence dans la fonction refreshSwatch, c'est dans celle-ci que tu dois mettre le code pour l'affichage et l'envoi.

**FoxStyled** · 19/12/2016, 21h41

Excuse moi je suis totalement perdu.

Comment la stocker et l'afficher? Je ne comprends pas bien le code :/

**NoSmoking** · 20/12/2016, 18h34

Sorry mais les questions que tu poses relèves des basiques du langage alors c'est par l'acquisition de ces bases qu'il faut que tu commences.

Sur base de l'exemple voici un petit fichier de test

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Slider - Range slider</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
#main { max-width: 50em; margin: auto;}
p { line-height: 2em; width: 20em;}
p span { float: right; display: inline-block; width: 10em;}
p span:before { content: ":"; margin-right: 1em;}
</style>
<script>
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);
}
 
var $_Slider;
function colorSlide(color) {
  $('#coloredSlider .ui-slider-range').css('background-color', color);
  $('#coloredSlider .ui-state-default, .ui-widget-content .ui-state-default').css('background-color', color);
}
function handlerSlide(e) {
  var color = $_Slider.slider('value'),
  color = getTheColor(color);
  $('#slide-value span').html(color);
  colorSlide(color);  
}
function handlerChange(e) {
  var color = $_Slider.slider('value'),
  color = getTheColor(color);
  $('#change-value span').html(color);
  $('#change-value').css('background-color', color);
  colorSlide('');  
}
$(function () {
  $_Slider = $('#coloredSlider');
  $_Slider.slider({
    orientation: 'horizontal',
    range: 'min',
    max: 100,
    value: 0,
    slide: handlerSlide,
    change: handlerChange
  });
});
</script>
</head>
<body>
<div id="main" class="ui-widget">
  <h1>A Colored jQuery UI Slider</h1>
  <div id="coloredSlider"></div>
  <p id="slide-value">Slide value<span></span></p>
  <p id="change-value">Change value<span></span></p>
</div>
</body>
</html>

le code est très peu différent du tien ... rien de complexe, il te faut maintenant faire l'effort de comprendre ce qui se fait en le testant !

**FoxStyled** · 20/12/2016, 18h45

Oui, j'ai finalement trouvé par moi-même, je vous prie de m'excuser. Merci!

Récupérer valeur de mon slider

jQuery

Vue hybride

Discussions similaires

Partager

Partager