Question

您能否看到下面的代码段，并提示我如何将文字和图片从<input>和range-text分开？

这是目前的样子

我想要它

我首先想到我可以将这个CSS（我可以使用）排序但是它很混乱，我觉得JS分裂form和{{1}更是一个问题来自正在更新的图像和文本。

＆＃13;

label

＆＃13;

var $slider = $('#slider');
var $max_value = $slider.attr('max-value');
var scale = [0, 50, 100];
var range = {
  "0": "<div class='tours'><div><img src='https://dummyimage.com/200x100/000/fff'></div><div><h3>Easy</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eros tellus, venenatis nec commodo id, vulputate ultricies neque. Fusce aliquam volutpat lectus, et pellentesque augue.</p></div><div class='range-slider'><div class='slider-path'></div><div class='slider-fill'><span class='range-text'>Easy</span></div></div></div>",
  "50": "<div class='tours'><div><img src='https://dummyimage.com/200x100/b029b0/fff'></div><div><h3>Medium</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eros tellus, venenatis nec commodo id, vulputate ultricies neque. Fusce aliquam volutpat lectus, et pellentesque augue.</p></div><div class='range-slider'><div class='slider-path'></div><div class='slider-fill'><span class='range-text'>Medium</span></div></div></div>",
  "100": "<div class='tours'><div><img src='https://dummyimage.com/200x100/2ab0a5/fff'></div><div><h3>Adventurous</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eros tellus, venenatis nec commodo id, vulputate ultricies neque. Fusce aliquam volutpat lectus, et pellentesque augue.</p></div><div class='range-slider'><div class='slider-path'></div><div class='slider-fill'><span class='range-text'>Adventurous</span></div></div></div>"
};

$slider.after('<div class="tours"><div><img src="https://dummyimage.com/200x100/000/fff"></div><div><h3>Easy</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eros tellus, venenatis nec commodo id, vulputate ultricies neque. Fusce aliquam volutpat lectus, et pellentesque augue.</p></div><div class="range-slider"><div class="slider-path"></div><div class="slider-fill"><span class="range-text">Easy</span></div></div></div>');

$(document).on('input', '#slider', function() {
  var $slider_width = $slider.width();
  var $slider_val = $slider.val();
  var $slider_fill = ($slider_val / $max_value) * 100;
  $('.slider-fill').css('width', $slider_fill + '%');
  $('.tours').html(range[$(this).val()]);
});

＆＃13;

form {
  position: relative;
}

#slider {
  width: 500px;
  height: 25px;
  background: #ddd;
  outline: none;
  opacity: 0;
  z-index: 99;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
  cursor: pointer;
}

.range-slider {
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: calc(100% - 10px);
  height: 25px;
  z-index: -1;
}

.slider-path {
  width: 100%;
  height: 100%;
  background: #ddd;
  opacity: 0.7;
  border-radius: 5px;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
}

.slider-path:hover {
  opacity: 1;
}

.slider-fill {
  position: absolute;
  top: 50%;
  left: 4px;
  background: #a1a1a1;
  height: calc(100% - 8px);
  border-radius: 3px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: all cubic-bezier(0, 0, 0, 1) 0.3s;
  transition: all cubic-bezier(0, 0, 0, 1) 0.3s;
}

.slider-fill:before {
  content: "";
  width: 12px;
  height: 32px;
  position: absolute;
  right: -2px;
  top: 50%;
  background: #4b4b4b;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  border-radius: 3px;
  cursor: pointer;
}

.range-text {
  display: block;
  width: 150px;
  text-align: center;
  position: absolute;
  top: -120%;
  right: -82px;
  background: #333;
  color: #fff;
  padding: 10px;
  border-radius: 10px;
  z-index: 99;
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
  -webkit-transition: all ease 0.25s;
  transition: all ease 0.25s;
}

.range-text:before {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #333;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

＆＃13;

Answer 1

您自己需要做的事情很少是使用css设置滑块的样式。但是这个核心功能到位了。希望这会有所帮助。

＆＃13;

 var scale = [0, 50, 100];
    var range = {
        0: {src : 'https://dummyimage.com/200x100/000/fff', text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eros tellus, venenatis nec commodo id, vulputate ultricies neque. Fusce aliquam volutpat lectus, et pellentesque augue.' , rangeText:  'Easy'},
        50: {src : 'https://dummyimage.com/200x100/000/fff', text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eros tellus, venenatis nec commodo id, vulputate ultricies neque. Fusce aliquam volutpat lectus, et pellentesque augue.' , rangeText:  'Medium'},
        100: {src : 'https://dummyimage.com/200x100/000/fff', text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eros tellus, venenatis nec commodo id, vulputate ultricies neque. Fusce aliquam volutpat lectus, et pellentesque augue.' , rangeText:  'Adventurous'}
    };

    slideVal = 50;



    $('#slider').on('input change', function(){

        slideVal =  $('#slider').val();
        update();
    });

    update();

    function update(){

            $('.tours img').attr('src', range[slideVal].src);
            $('.tours h3').text(range[slideVal].rangeText);
            $('.tours p').text(range[slideVal].text);
            $('.tours span').text(range[slideVal].rangeText);
    }

＆＃13;

input[type=range] {
    width: 500px;
    height: 25px;
    background: #ddd;
    z-index: 99;
    -webkit-transition: opacity 0.2s;
    transition: opacity 0.2s;
    cursor: pointer;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='tours'>
        <div>
            <img>
        </div>
        <div>
            <h3></h3>
            <p></p>
        </div>
 </div>
   <form action="">
      <input type="range" id="slider" min="0" max="100" step="50">
 </form>

＆＃13;

用于更改文本和图像的范围输入

1 个答案: