Champ input dans curseur slider

**neo-13** · 19/01/2020, 16h12

Bonjour,
j'ai créé un slider avec 2 curseurs, et je souhaiterais pouvoir insérer un input de type texte dans les curseurs.
J'ai essayé de le mettre directement dans la div du curseur, ou via monCurseur.innerHTML, mais ça ne marche pas.

Quelqu'un aurait il la solution?

Merci d'avance.
Nom : jquery.png
Affichages : 416
Taille : 1,5 Ko

Nom : jquery.png
Affichages : 416
Taille : 1,5 Ko

**Beginner.** · 19/01/2020, 20h46

Ben sans ton code (js, html et css) difficile de dire où cela coince...

Sinon il y a quelques temps un fil sur les sliders avait été ouvert, il y a des exemples...

**neo-13** · 20/01/2020, 20h50

Hello,
Voici le code ci dessous.

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
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Slider - Custom handle</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="https://resources/demos/style.css">
  <style>
  #custom-handle {
    width: 3em;
    height: 1.6em;
    top: 50%;
    margin-top: -.8em;
    text-align: center;
    line-height: 1.6em;
  }
  #custom-handle2 {
    width: 50px;
    height: 80px;
        border: 2px solid red;
    top: 50%;
    margin-top: -.8em;
    text-align: center;
    line-height: 1.6em;
  }
  </style>
  <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>
  $( function() {
    var handle = $( "#custom-handle" );
        var handle2 = $( "#custom-handle2" );
    $( "#slider" ).slider({
          range: true,
      min:0,
      max:500,
      values: [75,300],
      create: function() {
        handle.text( $( this).slider( "values",0 ) );
                handle2.text( $(this).slider( "values",1 ) );
      },
      slide: function( event, ui ) {
        handle.text( ui.values[0] );
                handle2.text( ui.values[1] );
                handle.innerHTML='<input type="text" id="qte" value="1" style="border:1;width:20px; color:#f6931f; font-weight:bold;">';
                $("#amount").val(ui.values[0]+"-"+ui.values[1]);
      }
    });
        //$("#amount").val("$"+$("#custom-handle").slider("values",0)+"-$"+$("#custom-handle2").slider("values",1));
  } );
  </script>
</head>
<body>
<p>
  <label for="amount">Price range:</label>
  <input type="text" id="amount" value="tt" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p> 
<div id="slider">
  <div id="custom-handle" class="ui-slider-handle"></div>
  <div id="custom-handle2" class="ui-slider-handle"></div>
</div>

**neo-13** · 21/01/2020, 09h21

L'intérêt est de récupérer une valeur supplémentaire ayant son intérêt

.
Supposons que le chiffre qui s'affiche actuellement soit le prix d'un objet, l'input permettrait de récupérer la quantité par exemple.

**neo-13** · 21/01/2020, 11h15

Je dois m'être mal expliqué.
J'ai dit que je souhaitais un input dans le curseur, pas un curseur dans le curseur.

Je ne souhaites pas un range de qté, je souhaite:
1/ La personne déplace le curseur pour définir son range de prix.
2/ rentre dans l'input la qté souhaité, l'input devant être dans le curseur juste en dessous de 233 et/ou 172.

Merci

Invité · 21/01/2020, 12h41

Bonjour,

Tu as 2 curseurs.
Donc : tu veux 1 input "quantité" dans CHAQUE curseur (donc 2 input différents) ?

Sinon (un seul input "quantité") pourquoi vouloir le mettre dans un des curseurs ?

Ergonomiquement, ce n'est ni pratique, ni logique.

Champ input dans curseur slider

jQuery

Vue hybride

Discussions similaires

Partager

Partager