JavaScript - Como mostrar un mensaje con <input type range>

 
Vista:
sin imagen de perfil
Val: 33
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Como mostrar un mensaje con <input type range>

Publicado por Javier (22 intervenciones) el 10/02/2020 06:53:00
Hola amigos programadores, quiero hacer algo bastante sencillo pero no encuentro la manera de proyectarlo, quieroq que si el puntero se encuentra en value=10 me imprima un mensaje como "malo" si el puntero esta en value=20 "mediano" alguien sabe como hacerlo?? se los agradecería mucho :(

Codigo:
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
<html>
   <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
      </script>
      <script type="text/javascript">
         $(function() {
            $('#points').on('input change', function() {
               var element = $('#points'),
               value = element.val(),
               step;
               // Set rules here
 
 
 
               element.attr('step', step);
               $('#value').text(value);
 
            });
         });
      </script>
   </head>
 
   <body>
      <div>
         Value: <span id="value"></span>
      </div>
 
      <div>
         <input id="points" type="range" value="1" min="1" max="80" />
      </div>
   </body>
</html>

Captura
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de joel
Val: 3.506
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Como mostrar un mensaje con <input type range>

Publicado por joel (895 intervenciones) el 10/02/2020 08:36:19
Hola Javier, haber si te sirve esto:
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
<html>
   <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
      </script>
      <script type="text/javascript">
         $(function() {
            $('#points').on('input change', function() {
                var element = $('#points');
                value = element.val();
                if (value=="10") {
                    $('#value').text("10 malo");
                } else {
                    $('#value').text(value);
                }
             });
         });
      </script>
   </head>
 
   <body>
      <div>
         Value: <span id="value"></span>
      </div>
 
      <div>
         <input id="points" type="range" value="1" min="1" max="80" />
      </div>
   </body>
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
sin imagen de perfil
Val: 33
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Como mostrar un mensaje con <input type range>

Publicado por Javier (22 intervenciones) el 10/02/2020 10:01:53
Muchas gracias por tu respuesta!!
Sabes cómo puedo posicionar el texto un poco más abajo?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar