JQuery - 范围滑块问题 - 更改图像

Question

I have the following issue:

• I want to add an Range Slider
• By moving the trigger different images should appear

The goal:

• To combine the 2 Range Slider Examples to one!
• I want to have the design of the first Range Slider
• But with the function of the second Range Slider (the ability to change images)

Hope ya'll can help me - Cheers!

 .slider{display:inline-block;vertical-align:middle;position:relative}.slider.slider-horizontal{width:50%;height:20px}.slider.slider-horizontal .slider-track{height:5px;width:100%;margin-top:-3px;top:50%;left:0; background-image: linear-gradient(to top, #D4D4D4 0%, #BDBDBD 100%); border: 0; content: ' '; display: block; height: 5px; left: 0; opacity: 1; position: absolute; right: 0; top: 10px; transition: height .5s ease, opacity 1s ease; z-index: -20;}.slider.slider-horizontal .slider-selection,.slider.slider-horizontal .slider-track-low,.slider.slider-horizontal .slider-track-high{height:100%;top:0;bottom:0}.slider.slider-horizontal .slider-tick,.slider.slider-horizontal .slider-handle{margin-left:-10px}.slider.slider-horizontal .slider-tick.triangle,.slider.slider-horizontal .slider-handle.triangle{position:relative;top:50%;transform:translateY(-50%);border-width:0 10px 10px 10px;width:0;height:0;border-bottom-color:#2e6da4;margin-top:0}.slider.slider-horizontal .slider-tick-container{white-space:nowrap;position:absolute;top:0;left:0;width:100%}.slider.slider-horizontal .slider-tick-label-container{white-space:nowrap;margin-top:20px}.slider.slider-horizontal .slider-tick-label-container .slider-tick-label{padding-top:4px;display:inline-block;text-align:center}.slider.slider-horizontal.slider-rtl .slider-track{left:initial;right:0}.slider.slider-horizontal.slider-rtl .slider-tick,.slider.slider-horizontal.slider-rtl .slider-handle{margin-left:initial;margin-right:-10px}.slider.slider-horizontal.slider-rtl .slider-tick-container{left:initial;right:0}.slider.slider-vertical{height:210px;width:20px}.slider.slider-vertical .slider-track{width:10px;height:100%;left:25%;top:0}.slider.slider-vertical .slider-selection{width:100%;left:0;top:0;bottom:0}.slider.slider-vertical .slider-track-low,.slider.slider-vertical .slider-track-high{width:100%;left:0;right:0}.slider.slider-vertical .slider-tick,.slider.slider-vertical .slider-handle{margin-top:-10px}.slider.slider-vertical .slider-tick.triangle,.slider.slider-vertical .slider-handle.triangle{border-width:10px 0 10px 10px;width:1px;height:1px;border-left-color:#2e6da4;border-right-color:#2e6da4;margin-left:0;margin-right:0}.slider.slider-vertical .slider-tick-label-container{white-space:nowrap}.slider.slider-vertical .slider-tick-label-container .slider-tick-label{padding-left:4px}.slider.slider-vertical.slider-rtl .slider-track{left:initial;right:25%}.slider.slider-vertical.slider-rtl .slider-selection{left:initial;right:0}.slider.slider-vertical.slider-rtl .slider-tick.triangle,.slider.slider-vertical.slider-rtl .slider-handle.triangle{border-width:10px 10px 10px 0}.slider.slider-vertical.slider-rtl .slider-tick-label-container .slider-tick-label{padding-left:initial;padding-right:4px}.slider.slider-disabled .slider-handle{background-image:-webkit-linear-gradient(top,#dfdfdf 0,#bebebe 100%);background-image:-o-linear-gradient(top,#dfdfdf 0,#bebebe 100%);background-image:linear-gradient(to bottom,#dfdfdf 0,#bebebe 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdfdfdf',endColorstr='#ffbebebe',GradientType=0)}.slider.slider-disabled .slider-track{background-image:-webkit-linear-gradient(top,#e5e5e5 0,#e9e9e9 100%);background-image:-o-linear-gradient(top,#e5e5e5 0,#e9e9e9 100%);background-image:linear-gradient(to bottom,#e5e5e5 0,#e9e9e9 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe5e5e5',endColorstr='#ffe9e9e9',GradientType=0);cursor:not-allowed}.slider input{display:none}.slider .tooltip.top{margin-top:-36px}.slider .tooltip-inner{white-space:nowrap;max-width:none}.slider .hide{display:none}.slider-track{position:absolute;cursor:pointer;background-image:-webkit-linear-gradient(top,#f5f5f5 0,#f9f9f9 100%);background-image:-o-linear-gradient(top,#f5f5f5 0,#f9f9f9 100%);background-image:linear-gradient(to bottom,#f5f5f5 0,#f9f9f9 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5',endColorstr='#fff9f9f9',GradientType=0);-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);border-radius:4px}.slider-selection{position:absolute;background-image:-webkit-linear-gradient(top,#f9f9f9 0,#f5f5f5 100%);background-image:-o-linear-gradient(top,#f9f9f9 0,#f5f5f5 100%);background-image:linear-gradient(to bottom,#f9f9f9 0,#f5f5f5 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff9f9f9',endColorstr='#fff5f5f5',GradientType=0);-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,0.15);box-shadow:inset 0 -1px 0 rgba(0,0,0,0.15);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;border-radius:4px}.slider-selection.tick-slider-selection{background-image:-webkit-linear-gradient(top,#8ac1ef 0,#82b3de 100%);background-image:-o-linear-gradient(top,#8ac1ef 0,#82b3de 100%);background-image:linear-gradient(to bottom,#8ac1ef 0,#82b3de 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff8ac1ef',endColorstr='#ff82b3de',GradientType=0)}.slider-track-low,.slider-track-high{position:absolute;background:transparent;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;border-radius:4px}.slider-handle{position:absolute;top:0;width:20px;height:20px; border: 2px solid #fff; border-radius: 4px; box-shadow: 0 3px 7px rgba(0, 0, 0, 0.31); background: #d4d4d4; background-image: linear-gradient(to bottom, #EFEFEF, #bbbbbb); background-size: auto 60px; background-repeat: no-repeat; transition: box-shadow 0.1s linear, background-position 0.1s linear; background-image: linear-gradient(to top, #1B1E28 15%, #e94843 100%); height: 38px; left: -18px; text-align: center; top: -6px; width: 32px; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.8);}.slider-handle.round{border-radius:}.slider-handle.triangle{background:transparent none}.slider-handle.custom{background:transparent none}.slider-handle.custom::before{line-height:20px;font-size:20px;content:'\\2605';color:#726204}.slider-tick{position:absolute;width:2px;height:20px;background-image:-webkit-linear-gradient(top,#aeaeae 0,#d1d1d1 100%);background-image:-o-linear-gradient(top,#f9f9f9 0,#f5f5f5 100%);background-image:linear-gradient(to bottom,##afafaf 0,#d1d1d1 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff9f9f9',endColorstr='#fff5f5f5',GradientType=0);box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;filter:none;opacity:1;border:0 solid transparent}.slider-tick.round{border-radius:}.slider-tick.triangle{background:transparent none}.slider-tick.custom{background:transparent none}.slider-tick.custom::before{line-height:20px;font-size:20px;content:'\\2605';color:#726204}.slider-tick.in-selection{background-image:-webkit-linear-gradient(top,#8ac1ef 0,#d1d1d1 100%);background-image:-o-linear-gradient(top,#8ac1ef 0,#d1d1d1 100%);background-image:linear-gradient(to bottom,#afafaf 0,#82b3de 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#8ac1ef',endColorstr='#afafaf',GradientType=0);opacity:1} .slider-handle:after { content:""; border-left: 1px solid #17181E; border-right: 1px solid rgba(255, 255, 255, 0.2); display: inline-block; height: 18px; margin: 8px 2px; } .slider-handle span { border-left: 1px solid #17181E; border-right: 1px solid rgba(255, 255, 255, 0.2); display: inline-block; height: 18px; margin: 8px 2px; } .slider-handle::after span { border-left: 1px solid #17181E; border-right: 1px solid rgba(255, 255, 255, 0.2); display: inline-block; height: 18px; margin: 8px 2px; } .range-slider { margin-left: 100px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.9.0/bootstrap-slider.min.js"></script> <h3> Main Slider </h3> <div class="range-slider"> <span id="ex18-label-1" class="hidden"></span> <input id="ex19" type="text" data-provide="slider" data-slider-ticks="[1, 2, 3, 4, 5]" data-slider-ticks-labels='["phase 1", "phase 2", "phase 3", "phase 4", "phase 5"]' data-slider-min="1" data-slider-max="5" data-slider-step="1" data-slider-value="1" data-slider-tooltip="hide" /> </div> <br> <br> <h3> Image Slider </h3> <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> <script>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>

Answer 1

Use onchange="changeslider(value)

And then

function changeslider(val) {
  $('#sliderStatus').html(val);
  $("#img").prop("src", imageUrl[val]);
}

Demo

 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]); }); function changeslider(val) { $('#sliderStatus').html(val); $("#img").prop("src", imageUrl[val]); }

 .slider { display: inline-block; vertical-align: middle; position: relative } .slider.slider-horizontal { width: 50%; height: 20px } .slider.slider-horizontal .slider-track { height: 5px; width: 100%; margin-top: -3px; top: 50%; left: 0; background-image: linear-gradient(to top, #D4D4D4 0%, #BDBDBD 100%); border: 0; content: ' '; display: block; height: 5px; left: 0; opacity: 1; position: absolute; right: 0; top: 10px; transition: height .5s ease, opacity 1s ease; z-index: -20; } .slider.slider-horizontal .slider-selection, .slider.slider-horizontal .slider-track-low, .slider.slider-horizontal .slider-track-high { height: 100%; top: 0; bottom: 0 } .slider.slider-horizontal .slider-tick, .slider.slider-horizontal .slider-handle { margin-left: -10px } .slider.slider-horizontal .slider-tick.triangle, .slider.slider-horizontal .slider-handle.triangle { position: relative; top: 50%; transform: translateY(-50%); border-width: 0 10px 10px 10px; width: 0; height: 0; border-bottom-color: #2e6da4; margin-top: 0 } .slider.slider-horizontal .slider-tick-container { white-space: nowrap; position: absolute; top: 0; left: 0; width: 100% } .slider.slider-horizontal .slider-tick-label-container { white-space: nowrap; margin-top: 20px } .slider.slider-horizontal .slider-tick-label-container .slider-tick-label { padding-top: 4px; display: inline-block; text-align: center } .slider.slider-horizontal.slider-rtl .slider-track { left: initial; right: 0 } .slider.slider-horizontal.slider-rtl .slider-tick, .slider.slider-horizontal.slider-rtl .slider-handle { margin-left: initial; margin-right: -10px } .slider.slider-horizontal.slider-rtl .slider-tick-container { left: initial; right: 0 } .slider.slider-vertical { height: 210px; width: 20px } .slider.slider-vertical .slider-track { width: 10px; height: 100%; left: 25%; top: 0 } .slider.slider-vertical .slider-selection { width: 100%; left: 0; top: 0; bottom: 0 } .slider.slider-vertical .slider-track-low, .slider.slider-vertical .slider-track-high { width: 100%; left: 0; right: 0 } .slider.slider-vertical .slider-tick, .slider.slider-vertical .slider-handle { margin-top: -10px } .slider.slider-vertical .slider-tick.triangle, .slider.slider-vertical .slider-handle.triangle { border-width: 10px 0 10px 10px; width: 1px; height: 1px; border-left-color: #2e6da4; border-right-color: #2e6da4; margin-left: 0; margin-right: 0 } .slider.slider-vertical .slider-tick-label-container { white-space: nowrap } .slider.slider-vertical .slider-tick-label-container .slider-tick-label { padding-left: 4px } .slider.slider-vertical.slider-rtl .slider-track { left: initial; right: 25% } .slider.slider-vertical.slider-rtl .slider-selection { left: initial; right: 0 } .slider.slider-vertical.slider-rtl .slider-tick.triangle, .slider.slider-vertical.slider-rtl .slider-handle.triangle { border-width: 10px 10px 10px 0 } .slider.slider-vertical.slider-rtl .slider-tick-label-container .slider-tick-label { padding-left: initial; padding-right: 4px } .slider.slider-disabled .slider-handle { background-image: -webkit-linear-gradient(top, #dfdfdf 0, #bebebe 100%); background-image: -o-linear-gradient(top, #dfdfdf 0, #bebebe 100%); background-image: linear-gradient(to bottom, #dfdfdf 0, #bebebe 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdfdfdf', endColorstr='#ffbebebe', GradientType=0) } .slider.slider-disabled .slider-track { background-image: -webkit-linear-gradient(top, #e5e5e5 0, #e9e9e9 100%); background-image: -o-linear-gradient(top, #e5e5e5 0, #e9e9e9 100%); background-image: linear-gradient(to bottom, #e5e5e5 0, #e9e9e9 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe5e5e5', endColorstr='#ffe9e9e9', GradientType=0); cursor: not-allowed } .slider input { display: none } .slider .tooltip.top { margin-top: -36px } .slider .tooltip-inner { white-space: nowrap; max-width: none } .slider .hide { display: none } .slider-track { position: absolute; cursor: pointer; background-image: -webkit-linear-gradient(top, #f5f5f5 0, #f9f9f9 100%); background-image: -o-linear-gradient(top, #f5f5f5 0, #f9f9f9 100%); background-image: linear-gradient(to bottom, #f5f5f5 0, #f9f9f9 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#fff9f9f9', GradientType=0); -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); border-radius: 4px } .slider-selection { position: absolute; background-image: -webkit-linear-gradient(top, #f9f9f9 0, #f5f5f5 100%); background-image: -o-linear-gradient(top, #f9f9f9 0, #f5f5f5 100%); background-image: linear-gradient(to bottom, #f9f9f9 0, #f5f5f5 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff9f9f9', endColorstr='#fff5f5f5', GradientType=0); -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border-radius: 4px } .slider-selection.tick-slider-selection { background-image: -webkit-linear-gradient(top, #8ac1ef 0, #82b3de 100%); background-image: -o-linear-gradient(top, #8ac1ef 0, #82b3de 100%); background-image: linear-gradient(to bottom, #8ac1ef 0, #82b3de 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff8ac1ef', endColorstr='#ff82b3de', GradientType=0) } .slider-track-low, .slider-track-high { position: absolute; background: transparent; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border-radius: 4px } .slider-handle { position: absolute; top: 0; width: 20px; height: 20px; border: 2px solid #fff; border-radius: 4px; box-shadow: 0 3px 7px rgba(0, 0, 0, 0.31); background: #d4d4d4; background-image: linear-gradient(to bottom, #EFEFEF, #bbbbbb); background-size: auto 60px; background-repeat: no-repeat; transition: box-shadow 0.1s linear, background-position 0.1s linear; background-image: linear-gradient(to top, #1B1E28 15%, #e94843 100%); height: 38px; left: -18px; text-align: center; top: -6px; width: 32px; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.8); } .slider-handle.round { border-radius: } .slider-handle.triangle { background: transparent none } .slider-handle.custom { background: transparent none } .slider-handle.custom::before { line-height: 20px; font-size: 20px; content: '\\2605'; color: #726204 } .slider-tick { position: absolute; width: 2px; height: 20px; background-image: -webkit-linear-gradient(top, #aeaeae 0, #d1d1d1 100%); background-image: -o-linear-gradient(top, #f9f9f9 0, #f5f5f5 100%); background-image: linear-gradient(to bottom, ##afafaf 0, #d1d1d1 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff9f9f9', endColorstr='#fff5f5f5', GradientType=0); box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; filter: none; opacity: 1; border: 0 solid transparent } .slider-tick.round { border-radius: } .slider-tick.triangle { background: transparent none } .slider-tick.custom { background: transparent none } .slider-tick.custom::before { line-height: 20px; font-size: 20px; content: '\\2605'; color: #726204 } .slider-tick.in-selection { background-image: -webkit-linear-gradient(top, #8ac1ef 0, #d1d1d1 100%); background-image: -o-linear-gradient(top, #8ac1ef 0, #d1d1d1 100%); background-image: linear-gradient(to bottom, #afafaf 0, #82b3de 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8ac1ef', endColorstr='#afafaf', GradientType=0); opacity: 1 } .slider-handle:after { content: ""; border-left: 1px solid #17181E; border-right: 1px solid rgba(255, 255, 255, 0.2); display: inline-block; height: 18px; margin: 8px 2px; } .slider-handle span { border-left: 1px solid #17181E; border-right: 1px solid rgba(255, 255, 255, 0.2); display: inline-block; height: 18px; margin: 8px 2px; } .slider-handle::after span { border-left: 1px solid #17181E; border-right: 1px solid rgba(255, 255, 255, 0.2); display: inline-block; height: 18px; margin: 8px 2px; } .range-slider { margin-left: 100px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.9.0/bootstrap-slider.min.js"></script> <h3> Main Slider </h3> <div class="range-slider"> <span id="ex18-label-1" class="hidden"></span> <input id="ex19" type="text" data-provide="slider" data-slider-ticks="[1, 2, 3, 4, 5]" data-slider-ticks-labels='["phase 1", "phase 2", "phase 3", "phase 4", "phase 5"]' data-slider-min="1" data-slider-max="5" data-slider-step="1" data-slider-value="1" data-slider-tooltip="hide" onchange="changeslider(value)" /> </div> <br> <br> <h3> Image Slider </h3> <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>