Champ input dans curseur slider

Version imprimable

19/01/2020, 16h12
neo-13

1 pièce(s) jointe(s)

Champ input dans curseur slider

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.
Pièce jointe 531863
19/01/2020, 20h46
Beginner.

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...

Hello,
Voici le code ci dessous.

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
<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>

21/01/2020, 09h21
neo-13

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.
21/01/2020, 11h15
neo-13

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
21/01/2020, 12h41
Invité

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 ? :koi:
Ergonomiquement, ce n'est ni pratique, ni logique.

Code:

1
2
3
4
5
6
7
    <div id="slider">
      <div id="custom-handle" class="ui-slider-handle"></div>
      <div id="custom-handle2" class="ui-slider-handle">
        <span></span><br />Dispo :<br />
        <input type="text" name="qte" value="0" style="width:40px;" readonly />
      </div>
    </div>

Code:

1
2
3
4
5
$( function() {
  var handle = $( "#custom-handle" );
  var handle2 = $( "#custom-handle2 > span" );
  var input_qte = $( "#custom-handle2 > input" );
...

22/01/2020, 14h24
neo-13

@jreaux
merci beaucoup, magnifique!! :king::bravo: