[Range Slider] Comprendre les sources

**surfeur22** · 17/07/2021, 11h06

Bonjour,

J'aimerai utiliser le Widget sur mon site mais je n'arrive pas à comprendre les sources, par exemple dans tout les codes il est spécifier . selector

Faut-il que j'ajoute la classe selector à l'input ? :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>

et comment modifier sa dimension ?

Merci d'avance !

**mathieu** · 17/07/2021, 12h05

si je regarde l'exemple là, il n'y a rien qui s'appelle "selector" :
https://jqueryui.com/slider/#range-vertical
c'est bien le résultat que vous souhaitez avoir ?

**surfeur22** · 17/07/2021, 12h12

Non je le souhaites horizontal, j'ai mis seulement le code comme exemple :

https://jqueryui.com/slider/#range

Api/documentation :

https://api.jqueryui.com/slider/

**mathieu** · 17/07/2021, 12h16

le code ".selector" qui est dans la documentation représente juste le code qui permet de sélectionner le champ "input".
vous pouvez utiliser n'importe quel sélecteur jquery à cet endroit.

**surfeur22** · 17/07/2021, 12h48

J'avais posé la question car j'avais déjà essayé la solution proposé mais sans succès :

J'ai voulu mettre le vidget à la verticale en cliquant sur le bouton avec l'id b1 mais sans succès :

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
<!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="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.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>
  <script src="JqueryS.js"></script>
  <script>
  $( function() {
    $( "#slider-range" ).slider({
      range: true,
      min: 0,
      max: 500,
      values: [ 75, 300 ],
      slide: function( event, ui ) {
        $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
      }
    });
    $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
      " - $" + $( "#slider-range" ).slider( "values", 1 ) );
  } );
  </script><?php
  
  if (isset($_POST['formS'])){
          
          $slider = $_POST["slider1"];    
          echo "slider : $slider <br>";   
  }
  
  ?>  
   <link rel="stylesheet" href="slider.css">
</head>
<body><br>
 
<p>
  <form name="formS" method="post" action="slider.php">
  <label for="amount">Price range:</label>
  <input type="text" id="amount" name="slider1" class="ui-slider ui-slider-handle" readonly style="border:0; color:#f6931f; font-weight:bold;">
  <!-- <input type="submit" name="formS" value="envoyer le formulaire"> --> 
  </form>
</p>
 
<div id="slider-range"></div><br><br>
 
<p1 id="p1" class="test">ceci est un paragraphe</p> 
 
<input type="button" id="b1" value="changer la position"> 
 
 
</body>
</html>

JqueryS. js (mon fichier script personel) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
$(function(){
 
	$("#b1").click(function()	
	{
	    $( "#amount" ).slider({
		  orientation: "vertical"
		});
 
	});
 
});

**mathieu** · 17/07/2021, 12h54

le slider est attaché à l'élément "#slider-range" donc vous devez utiliser le même élément au moment du clic sur le bouton.

[Range Slider] Comprendre les sources

jQuery

Vue hybride

Discussions similaires

Partager

Partager