Jquery Range Slider - 創建顯示範圍滑塊值的工具提示

我創建了一個範圍滑塊，它以可視化方式顯示用戶橫幅尺寸，同時還爲它們提供購買橫幅的價格。我有一個數組設置，顯示div內的sizeRange。 https://codepen.io/stinkytofu3311/pen/GmKxoW Jquery Range Slider - 創建顯示範圍滑塊值的工具提示

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>"]

有誰知道我可以放置在用戶移動它從右到左是隨後將跟隨滑塊的工具提示內的價值？

這裏是一個可視化例子..

來源

2017-04-11 StinkyTofu

你做的，你需要達到什麼重部分！不要放棄這個！你已經有了一個包含所有你需要的信息的DIV，你需要的唯一的東西就是移動該div（並且應用一些CSS來創建一個箭頭），拖動元素只有在它被移動時纔會移動（你甚至有兩個需要功能！）讓我知道你是否需要一個例子。 – ProgrammerV5

謝謝你的鼓勵。我是一名設計師，假裝我可以編碼來完成一個項目。：p我絕對可以把它看起來像CSS的工具提示，我想真正的問題是我如何讓div跟隨滑塊？ – StinkyTofu

它會絕對定位一些基於範圍滑塊拇指位置的基礎嗎？ – StinkyTofu

好吧，這是我第一次做你所需要的嘗試。假設你是一個設計師，你就可以風格它好得多比我能做到:)

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

來源

2017-04-11 18:33:56 ProgrammerV5

我剛看到這個！那很棒。似乎有一個問題，它落後了，當你向右滑動到左邊時。非常感謝！這會幫助我解決這個問題。 – StinkyTofu

太棒了！是的，正如我所說的，雖然不是很好，但它是我現在可以做的最好的，如果這對你有幫助，請投票回答，因爲這對我有幫助。謝謝！ – ProgrammerV5

Jquery Range Slider - 創建顯示範圍滑塊值的工具提示

回答

相關問題