Jquery Range Slider - Creating Tooltip that shows Range Slider Value

Question

I created a range slider that shows the user banner sizes visually while also giving them the price of the banner to purchase. I have an array set up that displays the sizeRange within a div. 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>"]

Does anybody know how i could place the value inside of a tooltip that then would follow the slider while the user moves it right to left?

Here is a visual example..

Answer 1

Ok, this is my first attempt to do what you need. Given that you are a designer you will be able to style it much better than I can do :)

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