0
149
VistasControl deslizante de rango de Jquery con intercambio de imágenes
Estoy tratando de crear un control deslizante de rango que pueda cambiar a diferentes imágenes cuando el usuario arrastra el control deslizante. Creé un control deslizante de rango, pero no sé cómo tomar el valor del control deslizante y luego mostrar la imagen correspondiente para el valor seleccionado.
Aquí hay un ejemplo visual de mi objetivo. 
<input type="range" min="0" max="9" value="0" step="1" onChange="sliderChange(this.value)" /> <br /><br /> slider value = <span id="sliderStatus">0</span>Cualquier ayuda sería apreciada sobre cómo lograr esto.
Gracias
·
Santiago Trujillo
1 Respuestas
Responde la pregunta0
var imageUrl = new Array(); imageUrl[0] = 'https://static.pexels.com/photos/39517/rose-flower-blossom-bloom-39517.jpeg'; imageUrl[1] = 'https://static.pexels.com/photos/36764/marguerite-daisy-beautiful-beauty.jpg'; imageUrl[2] = 'http://cdn2.stylecraze.com/wp-content/uploads/2013/07/dahlia-flowers.jpg'; imageUrl[3] = 'https://static.pexels.com/photos/39517/rose-flower-blossom-bloom-39517.jpeg'; imageUrl[4] = 'https://static.pexels.com/photos/36764/marguerite-daisy-beautiful-beauty.jpg'; imageUrl[5] = 'http://cdn2.stylecraze.com/wp-content/uploads/2013/07/dahlia-flowers.jpg'; $(document).on('input change', '#slider', function() {//listen to slider changes var v=$(this).val();//getting slider val $('#sliderStatus').html( $(this).val() ); $("#img").prop("src", imageUrl[v]); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="range" id="slider" value="0.0" min="0" max="5" step="1" /> <br /><br /> <img src="" style='width:100px;height:100px;' id='img'/> slider value = <span id="sliderStatus">0</span>Espero que te ayude.
·
Santiago Trujillo
Denunciar
Responde la pregunta