Nueva pregunta

Pregunta:

 
  0  
 
 
Jhonny Perez Karma: 23 Colombia
 
 Fecha: 20-05-2017 08:35:22 (En Español)

¿Cómo hacer un ajuste de precio máximo y mínimo en WordPress?[Resuelta]

Alguien tiene un ejemplo o sabe como hacer un ajuste de precios, algo similar a esto, donde el usuario con el mouse arraste el precio indicando el máximo y mínimo que quiere gastar, lo ando desarrollando en WordPress.


https://drive.google.com/open?id=0B6liBiVaQd0ldm1mQXNaSWFVWjA


 Etiquetas: Base de Datos - Javascript - JQuery - MySQL - PHP - PHP Avanzado - Pregunta - Web - WordPress Votos: 0 - Respuestas: 2 - Vistas: 15 Compartir en: Google Facebook Twitter LinkedIn Link
 

Respuestas:

  •  
      0  
     
     
    Chrismart Anji Karma: 1473 México
     
    Fecha: 21-05-2017 22:25:33 Hola Compañer, primero que nada no se como lo logro para que se viera así el input y sin importar si es wordpress o no este código le puede ayudar, aunque aclaro que es diferente al suyo pues usas 2 inputs de tipo rango en vez de una .-.

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<input name="min" type="range" min="0" max="1000" value="0"/>
<input name="max" type="range" min="1000" max="10000" value="1000"/>
Min: <span></span>
Max: <span></span>
<script>
var min = document.getElementsByName('min')[0];
var max = document.getElementsByName('max')[0];
var base = document.getElementsByTagName('span');

self.onload = function() {
	base[0].innerText = min.value;
	base[1].innerText = max.value;
}

min.onchange = function() {
base[0].innerText = min.value;
}

max.onchange = function() {
base[1].innerText = max.value;
}
</script>
</body>
</html>


    en caso de que no era eso lo que queria, responda para poder ayudarle más o modificar el código a su gusto n.n

    Saludos Jhonny Perez       Votos: 0 - Link respuesta
     
  •  
      2  
     
     
    Fernando Mosquera Karma: 10200 Argentina
     
    Fecha: 22-05-2017 02:30:14 Hola Jhonny y Chrismart, este control típicamente esta implementado con JQuery UI Slider, y es un Range slider, aquí pueden ver el código de ejemplo:

    Código de ejempo
    <!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>
  $( 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>
</head>
<body>
 
<p>
  <label for="amount">Price range:</label>
  <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
 
<div id="slider-range"></div>
 
 
</body>
</html>


    Demo sitio oficial: https://jqueryui.com/slider/#range

    Saludos y buen código!       Votos: 2 - Link respuesta
     
Para participar activamente de la comunidad primero debes autenticarte, ingresa al sistema.Iniciar Sesión
 
frjcbbae garagebible.com