Jquery Range Slider - 範囲スライダの値を示すツールチップを作成

Question

ユーザーバナーのサイズを視覚的に表示し、購入するバナーの価格も表示する範囲スライダを作成しました。私は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>"] 

誰もが、私は、ユーザーが右から左に移動しながらスライダーをたどるツールチップの内部の値を置くことができる方法を知っていますか？ここで

が視覚的例..です

Answer 1

[OK]を、これはあなたが必要なものを行うには、私の最初の試みです。あなたはそれを私が行うことができるよりもはるかに良いのスタイルをすることができますデザイナーであることを考える:)

[![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