We Keep Coding

jQuery .append() and .remove() skipping behavior with slider function

I'm having trouble with some dynamic HTML. I've got a slider that adds or removes DOM elements as the value changes. Each time it increases, an element is added, and each time it decreases, an element is removed.
Here's the HTML:
<input type="range" min="3" max="16" class="rgb-slider" value="3" tabindex="-1" oninput="slider(this.value)">
<div class="container">
<div class="boxes">
<div class="box"><span></span></div>
<div class="box"><span></span></div>
<div class="box"><span></span></div>
</div>
</div>
Here's the JS:
var colorCount = 3;
function slider(value) {
if (colorCount < parseInt(value)) {
$('.boxes').append('<div class="box"><span></span></div>');
colorCount = value;
} else {
$('.box:last-child').remove();
colorCount = value;
}
}
http://jsfiddle.net/meu9carx/
However, when I quickly move the slider, it seems to skip or trip up, and I end up with more or fewer than I started with. The slider has a range from 3-16, but sometimes the min value goes to more or less than 3. Sometimes, all the boxes vanish.
Is there a smarter way to code this? I'm trying to avoid hard-coding divs here.

If the mouse moves fast, it's possible for the input value to change by more than one (in either direction) during a single input event. Use the value in the input to determine how many squares there should be exactly, rather than adding or removing only a single element each time.
const boxes = $('.boxes');
$('input').on('input', function() {
const targetSquares = Number(this.value);
while (boxes.children().length < targetSquares) {
boxes.append('<div class="box"><span></span></div>');
}
while (boxes.children().length > targetSquares) {
$('.box:last-child').remove();
}
});
body{
background: #777;
font-family: 'Arimo', sans-serif;
}
.container { padding: 20px 0; }
.boxes { display: flex; }
.box {
padding: 10px;
background: #ffffff;
height: 100px;
flex: 1;
border: 1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="range" min="3" max="16" class="rgb-slider" value="3" tabindex="-1">
<div class="container">
<div class="boxes">
<div class="box"><span></span></div>
<div class="box"><span></span></div>
<div class="box"><span></span></div>
</div>
</div>

How to check current value on range slider?

I want to add the current range slider number on the range slider circle. I want my below range slider like this Screenshot.
$(".slider").on("change", function() {
console.clear()
var max = $("[name=plan]:checked").data('max')
var total = 0
//get total
$(".slider").each(function() {
total += parseInt($(this).val()) //calculate total
})
console.log("Total --" + total + " Max --" + max)
if (total > max) {
$(this).val(0) //set value to 0 again..
console.log("can't move..")
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<input type="radio" id="starter" name="plan" data-max="12" value="starter" checked>
<label for="starter">Up to 12</label><br>
<input type="radio" id="plus" name="plan" data-max="24" value="plus">
<label for="plus">Up to 24</label><br>
<input type="range" name="slider-1" min="0" max="12" value="0" step="1" class="slider range-slider">
<output class="range-text">
<span class="number"></span><span class="text">Videos</span>
</output><br>
<input type="range" name="slider-1" min="0" max="12" value="0" step="1" class="slider range-slider"><br>
<input type="range" name="slider-1" min="0" max="12" value="0" step="1" class="slider range-slider"><br>
<input type="range" name="slider-1" min="0" max="12" value="0" step="1" class="slider range-slider"><br>

This solution by css-tricks.com, edited by me might help you. Unfortunately, you cannot position the 'bubble' over the default slider handle because then you can't click on the handle. In my opinion, it looks fairly good, and if you edit the slider styles themselves I think it could be very convincing.
If you want to make it exactly like in the screenshot, however, I really recommend reading this article by css-tricks.com as it really goes in depth about creating a custom slider.
var range = document.getElementById('range');
var bubble = document.getElementById('bubble');
range.addEventListener("input", () => {
setBubble(range, bubble);
});
setBubble(range, bubble);
function setBubble(range, bubble) {
const val = range.value;
const min = range.min ? range.min : 0;
const max = range.max ? range.max : 100;
const newVal = Number(((val - min) * 100) / (max - min));
bubble.innerHTML = val;
bubble.style.left = `calc(${newVal}% + (${8 - newVal * 0.15}px))`;
}
.range-parent {
position: relative;
margin: 0 auto 3rem;
}
.range {
width: 100%;
}
.bubble {
background: dodgerblue;
color: white;
padding: 4px 12px;
position: absolute;
border-radius: 4px;
left: 50%;
transform: translateX(-50%);
}
body {
margin: 2rem;
}
<div class="range-parent">
<input type="range" class="range" id="range">
<output class="bubble" id="bubble"></output>
</div>

I found my answer on jQuery Range Slider
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Slider - Custom handle</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#custom-handle {
width: 3em;
height: 1.6em;
top: 50%;
margin-top: -.8em;
text-align: center;
line-height: 1.6em;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
var handle = $( "#custom-handle" );
$( "#slider" ).slider({
create: function() {
handle.text( $( this ).slider( "value" ) );
},
slide: function( event, ui ) {
handle.text( ui.value );
}
});
} );
</script>
</head>
<body>
<div id="slider">
<div id="custom-handle" class="ui-slider-handle"></div>
</div>
</body>
</html>

How to create a total using plus minus buttons and input box

Im trying to make a price calculator where 1 employee = $21 a month. There are two way I want to be able to set the quantity of employees. I would like to use a plus and minus sign to adjust the quantity as well as have an input box where they can type the quantity. Adjusting either will instantly update the total. In my attached code you will see that the typing a number into the input box works correctly but using the plus and minus sign does not adjust the total. It changes the number but the math is not executed. Does anyone have any ideas? Thank you!
var $buttonPlus = $('.increase-btn');
var $buttonMin = $('.decrease-btn');
var $quantity = $('.quantity');
/*For plus and minus buttons*/
$buttonPlus.click(function(){
$quantity.val( parseInt($quantity.val()) + 1 );
});
$buttonMin.click(function(){
$quantity.val( parseInt($quantity.val()) - 1 );
});
/*For total*/
$(document).ready(function(){
$(".checkout").on("keyup", ".quantity", function(){
var price = +$(".price").data("price");
var quantity = +$(this).val();
$("#total").text("$" + price * quantity);
})
})
.checkout {
height: 300px;
width: 400px;
margin: 20px auto;
border: 2px solid black;
text-align: center;
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<div class="checkout">
<h1 class="title">Checkout</h1>
<p class="price" data-price="21">$21 per month</p>
<p class="description">Quantity:</p>
<button type="button" class="decrease-btn">-</button>
<input type="text" class="quantity" value="1">
<button type="button" class="increase-btn">+</button>
<p class="total">Total: <span id="total">$21</span></p>
</div>

Change the event to 'input' so it only fires for actual value changes
Add trigger('input') to the end of the value changes so the event is generated (logical value changes do not generate events).
Move the first bindings into the document ready for safety (optional change).
Put Math.max() around the subtraction so that the negative can not make the value go less than zero. (optional change)
/*For total*/
$(document).ready(function() {
$(".checkout").on("input", ".quantity", function() {
var price = +$(".price").data("price");
var quantity = +$(this).val();
$("#total").text("$" + price * quantity);
})
var $buttonPlus = $('.increase-btn');
var $buttonMin = $('.decrease-btn');
var $quantity = $('.quantity');
/*For plus and minus buttons*/
$buttonPlus.click(function() {
$quantity.val(parseInt($quantity.val()) + 1).trigger('input');
});
$buttonMin.click(function() {
$quantity.val(Math.max(parseInt($quantity.val()) - 1, 0)).trigger('input');
});
})
.checkout {
height: 300px;
width: 400px;
margin: 20px auto;
border: 2px solid black;
text-align: center;
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<div class="checkout">
<h1 class="title">Checkout</h1>
<p class="price" data-price="21">$21 per month</p>
<p class="description">Quantity:</p>
<button type="button" class="decrease-btn">-</button>
<input type="text" class="quantity" value="1">
<button type="button" class="increase-btn">+</button>
<p class="total">Total: <span id="total">$21</span></p>
</div>

Cannot read property 'addEventListener' of null on slider

I have a slider which when the mouse move event is fired by it I want to display its value inside a paragraph.
This is the code I am using:
var exit = document.getElementsByTagName("p");
var slide = document.getElementById('slider');
window.addEventListener("load", function(){
slide.addEventListener("mousemove", function() {
console.log(slide.value);
});
Html
<input type="range" value="0" min="0" max="10" id="slider">
<p></p>
My problem is that I get this error:
"Cannot read property 'addEventListener' of null"
Any ideas?

I think you want to add an event listener for an input event not a mousemove event.
The input event fires when the range input changes value not when the mouse just happens to be moving over the range selector.
As pointed out by #Gersey, the input event will be fired when the user changes the value with the arrow keys.
Here is a demo that highlights the issue
window.onload = function() {
var slide = document.getElementById('slider'),
p1 = document.querySelector('#oninput'),
p2 = document.querySelector('#onmousemove');
slide.addEventListener("input", function() {
p1.textContent += ' ' + slide.value;
});
slide.addEventListener("mousemove", function() {
p2.textContent += ' ' + slide.value;
});
};
div.display {
display: inline-block;
width: 40%;
height: 200px;
border: 1px solid black;
}
div {
overflow: hidden;
}
<input type="range" value="0" min="0" max="10" id="slider" />
<div>
<div class="display" id="oninput"></div>
<div class="display" id="onmousemove"></div>
</div>

move the line
var slide=document.getElementById('slider');
into your window load callback. The problem may be that the dom is not loaded when you init the slide, so its not there.

Try this bro ..
var exit = document.getElementsByTagName("p");
var slide = document.getElementById('slider');
slide.addEventListener("mousemove", function() {
console.log(slide.value);
$('p').text('value : '+slide.value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="range" value="0" min="0" max="10" id="slider">
<p></p>

How to use star rating (input) field many times in a page

I am new to jquery. I want to use this star rating(input) field several times in a page with same ids(as it will come dynamic). Please let me know how i do this.
Jsfiddle: http://jsfiddle.net/9xrkr/
<script src="http://www.radioactivethinking.com/rateit/src/jquery.rateit.js"></script>
<input type="range" min="0" max="5" value="0" step="1" id="backing1">
<div class="rateit" id="rateitHover" data-rateit-backingfld="#backing1" data-rateit-step="1" >
<span class="tooltip" style="float:right; padding-left:10px;"></span>
</div>
<script>
var tooltipvalues = ['Bad', 'Poor', 'Average', 'Good', 'Excellent'];
var valueToDisplay
$("#rateitHover").bind('over', function (event, value) {
$('.tooltip').text(tooltipvalues[value - 1]);
});
$("#rateitHover").bind('reset', function () {
$('.tooltip').text('');
$('#rateitHover').rateit('value')
});
$("#rateitHover").bind('rated', function (event, value) {
$('.tooltip').text('R: ' + tooltipvalues[value - 1]);
});
$('#rateitHover').bind('mouseleave', function() {
var v = $('#rateitHover').rateit('value');
if (v == 0) {
$('.tooltip').html('');
} else {
$('.tooltip').html('R: ' + tooltipvalues[v - 1]);
}
});
</script>

You must use classes (not the unique id of the element)
Try this:
HTML
<input type="range" min="0" max="5" value="0" step="1" id="backing1">
<input type="range" min="0" max="5" value="0" step="1" id="backing2">
<div class="rateit" id="rateitHover1" data-rateit-backingfld="#backing1" data-rateit-step="1" >
<span class="tooltip" style="float:right; padding-left:10px;"></span>
</div>
<div class="rateit" id="rateitHover2" data-rateit-backingfld="#backing2" data-rateit-step="1" >
<span class="tooltip" style="float:right; padding-left:10px;"></span>
</div>
JAVASCRIPT
var tooltipvalues = ['Bad', 'Poor', 'Average', 'Good', 'Excellent'];
var valueToDisplay
$(".rateit").bind('over', function (event, value) {
$(this).find('.tooltip').text(tooltipvalues[value - 1]);
});
$(".rateit").bind('reset', function () {
$(this).find('.tooltip').text('');
$(this).rateit('value')
});
$(".rateit").bind('rated', function (event, value) {
$(this).find('.tooltip').text('R: ' + tooltipvalues[value - 1]);
});
$('.rateit').bind('mouseleave', function() {
var v = $(this).rateit('value');
if (v == 0) {
$(this).find('.tooltip').html('');
} else {
$(this).find('.tooltip').html('R: ' + tooltipvalues[v - 1]);
}
});
Fiddle
http://jsfiddle.net/9xrkr/1/

Try changing ids to classnames, and try narrowing the selectors to relate to this, which should relate to the element that is triggered:
$('#rateitHover')
changes to:
$('.rateit')
Also, you need to get the tooltip that is within the element:
$('.tooltip')
changes to:
$(this).find('.tooltip')
And the $('#rateitHover').rateit('value') should be changed to $(this).rateit('value')
UPDATE
Apparently, since this is all served up dynamically, you can't make the above adjustments. Therefore, I would recommend you use a different script.
I've made something for this purpose in the past: http://codepen.io/bozdoz/pen/ClmLI
See if this code would suit your purposes. Notice that the stars all have classes, instead of ID's. It should be easier to manipulate. Hope this helps (someone). :)
HTML:
<div class="clearfix stars">
<div class="darn">Oh no!</div>
<div class="brilliant">Thanks!</div>
<div class="starHolder">
<div class="star">
<div class="star">
<div class="star">
<div class="star">
<div class="star"></div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.stars {width:450px;margin:5% auto;position:relative}
.star {width:66px;height:50px;background:url(http://www.prportfolio.ca/bjd/images/star.png) no-repeat;cursor:pointer;transition: all .5s;-moz-transition: all .5s; -webkit-transition: all .5s; -o-transition: all .5s;}
.star:hover, .star.on {background-position: -66px 0px;}
.star .star { margin-left: 66px; }
.starHolder {width:345px;margin:0 auto;}
.darn {color:#5c2222}
.brilliant {color:#a0b9d8;right:0px}
.darn, .brilliant {line-height:50px;font-weight:bold;display:none;position:absolute}
JS (jQuery):
$('.star').click(function(e){
e.stopPropagation();
var i = $('.stars .star').index(this);
if(i==0||i==5){
$(this).parents('.stars').find('.darn').show().delay(100).fadeOut(1000);
}
if(i==4||i==9){
$(this).parents('.stars').find('.brilliant').show().delay(100).fadeOut(1000);
}
$(this).addClass('on').find('.star').removeClass('on').end().parents('.star').addClass('on');
});