javascript - Jquery Range Slider - 创建显示范围 slider 值的工具提示

Question

我创建了一个范围 slider ，可以直观地显示用户横幅尺寸，同时还为他们提供了购买横幅的价格。我设置了一个数组，它在一个 div 中显示 sizeRange。 https://codepen.io/stinkytofu3311/pen/GmKxoW

var sizeRange = ["11x17 - Starting Price <span>$19.99</span>",

        "24x36 - Starting Price <span>$29.99</span>",

        "70x90 - Starting Price <span>$39.99</span>",

        "120x50 - Starting Price <span>$49.99</span>",

        "67x18 - Starting Price <span>$59.99</span>",

        "19x30 - Starting Price <span>$69.99</span>"]

有人知道我如何将值放在工具提示中，然后当用户从右向左移动 slider 时它会跟随 slider 吗？

这是一个视觉示例..

Answer 1

好的，这是我第一次尝试做你需要的事情。鉴于你是一名设计师，你将能够比我更好地设计它:)

[![var moveit = false;
var sizeRange = \["11x17 - Starting Price <span>$19.99</span>",

        "24x36 - Starting Price <span>$29.99</span>",

        "70x90 - Starting Price <span>$39.99</span>",

        "120x50 - Starting Price <span>$49.99</span>",

        "67x18 - Starting Price <span>$59.99</span>",

        "19x30 - Starting Price <span>$69.99</span>"\]


var imageUrl = new Array(); // Store images inside of an Array

        imageUrl\[0\] = 'http://svgshare.com/i/1Ak.svg';

        imageUrl\[1\] = 'http://svgshare.com/i/1AQ.svg';

        imageUrl\[2\] = 'http://svgshare.com/i/1Bb.svg';

        imageUrl\[3\] = 'http://svgshare.com/i/1Am.svg';

        imageUrl\[4\] = 'http://svgshare.com/i/1CG.svg';

        imageUrl\[5\] = 'http://svgshare.com/i/1By.svg';


$('#sliderPrice').html( sizeRange\[0\] );

$(document).on('input change', '#range-slider', function() { //Listen to slider changes (input changes)
    var v=$(this).val(); //Create a Variable (v), and store the value of the input change (Ex. Image 2 \[imageURL\])

   $('#sliderStatus').html( $(this).val() );
   $('#sliderPrice').html( sizeRange\[v\] );

  $("#img").prop("src", imageUrl\[v\]); // Modify the Images attribute src based on the sliders value, and input the value inside the imageURL\[v\] to display image
});

// ::::: Range Slider Thumb ::::: //

$("#range-slider").on("mousedown", function() { //1. When user clicks their mouse down on the Range-Slider
    $(this).removeClass().addClass("thumb-down");//1.1 Remove default class from CSS, and add the class .thumb-down (changes background color)
    $(this).addClass("hover-ring");//1.2 Remove default class from CSS, and add the class .hover-ring (changes box-shadow to a green color)
  moveit = true;
});

$("#range-slider").on("mouseup", function() { //2. When user mouse-up on Range-Slider

    $(this).addClass("thumb-up"); //2.1 Changes thumb color back to light green

    $(this).addClass("hover-ring-out"); //2.2 Removes Box-Shadow
  moveit = false;
});


  $(document).mousemove(function(e){      
            var parentOffset = $('#range-slider').parent().offset(); 
            var relX = e.pageX - parentOffset.left;
            var relY = e.pageY - parentOffset.top;        
            $('#sliderPrice').css('top', relY).css('left', relX);
      });][1]][1]

https://codepen.io/anon/pen/JNPvEJ