Scroll curseur avec le nombre de pixels

Bonjour à tous.
Je voudrais avoir un curseur avec le nombre de pixels comme suit -> oOo.
Avez-vous une piste ?

Bonjour,
pas grand chose à voir avec le CSS ;)

Citation:

Avez-vous une piste ?

La première des choses à faire et de regarder le code source, touches Ctrl + U, pour avoir une idée de comment cela fonctionne.

Dans le cas présent il s'agit d'une interaction HTML-JS.

Exemple tout simple :
Code:

1 2 3 4 5 6 7 8 <p> <input type="range" name="range" value="50" oninput="this.nextElementSibling.textContent = this.value"> <output>50</output> </p> <p> <input type="range" name="range" value="25" oninput="this.nextElementSibling.textContent = this.value"> <output>25</output> </p>

Ok merci
Une autre question.
Comment garder en mémoire le curseur lors du rafraichissement ?
l'exemple -> oOo
le code:

Code:

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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<?php
$pdo = new PDO('mysql:host=mon_ip;dbname=ma_base', 'id', '****');
?>
<!DOCTYPE html>
<head>
<title> .: zool.bzh :. Demo - Vision</title>
<link href="css/grid.css" rel="stylesheet" type="text/css" />
<link href="css/text.css" rel="stylesheet" type="text/css" />
 </head>
<body style="width: 980px" bgcolor=#FFFFFF>
  <a href="/"><img src="pics/header.jpg" height="147" width="980"></a>
<?php
$selected = isset( $_GET['dos'] ) ? $_GET['dos'] : "" ;
$selectedValue = 'selected="selected"';
?>
<div class="wrapper">
  <div class="one"><form method="GET" action="grid.php">
    <select name="dos" id="dos" size="1">
       <option value="Dossier1" <?php if( $selected == "Dossier1" ) echo $selectedValue;  ?>>Dossier1</option>
       <option value="Dossier2" <?php if( $selected == "Dossier2" ) echo $selectedValue; ?>>Dossier2</option>
       <option value="Dossier3" <?php if( $selected == "Dossier3" ) echo $selectedValue; ?>>Dossier3</option>
    </select>
  </div>
<?php
 
$dos = $_GET['dos'] ?? 'Dossier1';
 
    $sql_less = 'SELECT min(height), max(height), min(width), max(width), name_tof, dos_tof FROM pictures WHERE dos_tof = :dos_tof';
    $sth_less = $pdo->prepare($sql_less); 
    $sth_less->execute(array('dos_tof' => $dos));
                         
    $done_pics = $sth_less->fetchAll();
 
foreach ($done_pics as $pics_less) {
    $min_height_value = $pics_less['min(height)'];
    $max_height_value = $pics_less['max(height)'];
    $min_width_value = $pics_less['min(width)'];
    $max_width_value = $pics_less['max(width)'];
}
 
if (isset($_GET['heightmin']) && isset($_GET['heightmax']) && isset($_GET['widthmin']) && isset($_GET['widthmax'])) {
     $min_height_value = $_GET['heightmin']; 
     $max_height_value =  $_GET['heightmax'];
     $min_width_value = $_GET['widthmin'];
     $max_width_value = $_GET['widthmax'];
}
 
$sql_pics = 'SELECT height, width, dos_tof, name_tof FROM pictures WHERE dos_tof = :dos_tof AND height <= :sqlmaxheight AND height >= :sqlminheight  AND width <= :sqlmaxwidth AND width >= :sqlminwidth';
$sth_pics = $pdo->prepare($sql_pics);
$sth_pics->execute(array('dos_tof' => $dos,
                         'sqlmaxheight' => $max_height_value,
                         'sqlminheight' => $min_height_value,
                         'sqlmaxwidth' => $max_width_value,
                         'sqlminwidth' => $min_width_value
                                     ));
 
 
if (isset($_GET['reset'])) {
        foreach ($done_pics as $pics_less) {
        $min_height_value = $pics_less['min(height)'];
        $max_height_value = $pics_less['max(height)'];
        $min_width_value = $pics_less['min(width)'];
        $max_width_value = $pics_less['max(width)'];
    }
}
 
?>
     <div class="two">  
       longueur comprise entre  
       <input type="range" name="heightmin" value="<?php echo $min_height_value;?>" min="<?php echo $min_height_value ?>" max="<?php echo $max_height_value ?>" oninput="this.nextElementSibling.textContent = this.value"/>
       <output><?php echo $min_height_value; ?></output><br>
       et <br>
	   <input type="range" name="heightmax" value="<?php echo $max_height_value;?>" min="<?php echo $min_height_value ?>" max="<?php echo $max_height_value ?>" oninput="this.nextElementSibling.textContent = this.value"/>
       <output><?php echo $max_height_value; ?></output>
	   </div>
 
 
       <div class="tree"> 
	   largeur comprise entre  
         <input type="range" name="widthmin" value="<?php echo $min_width_value;?>" min="<?php echo $min_width_value; ?>" max="<?php echo $max_width_value ?>" oninput="this.nextElementSibling.textContent = this.value"/>
         <output><?php echo $min_width_value; ?></output><br>
         et <br>
	     <input type="range" name="widthmax"   value="<?php echo $max_width_value;?>" min="<?php echo $min_width_value ?>" max="<?php echo $max_width_value ?>" oninput="this.nextElementSibling.textContent = this.value"/>
         <output><?php echo  $max_width_value; ?></output>
        </div>
 
 
	   <div class="four">
         <input type="submit" name="val" value="Valider" />
         <input type="submit" name="reset" value="reset" />
         <br>
 
 
 
		<?php $nbr_line_pics = $sth_pics->rowCount();
          echo $nbr_line_pics." photos dans la base<br>"; 
                 ?>
	 </div>
	 <div class="five">  <?php
         $save_pics = $sth_pics -> fetchAll(); 
            foreach($save_pics as $pics) {
                echo $pics['name_tof']."<br>";
            }
?>
        </div>
    </body>
</html>

??

Citation:

Une autre question.

On est quand même plus un soucis logique serveur que CSS ;)

Citation:

Comment garder en mémoire le curseur lors du rafraichissement ?

tu n'as qu'une chose à modifier entre les différents appels, c'est la valeur de tes <input type="range">.

Cela n'a pas de sens que de mettre la value égale au min, min et max seraient plutôt des constantes, éventuellement différentes suivant le dossier sélectionné.