Vue-HTML range slider with scaling factor - javascript

I need to make a range slider which slide max up to 2000 but with dynamic max values. See the below example for better understanding
The code that came up with is as under. It perform the decrement of range as desired but unable to handle increment
<template>
<div class="slider-wrapper">
<input v-model="current" ref="range" type="range" :min="sliderMin" :max="silderMax" :step="sliderStep" class="slider">
<output class="bubble">{{current}}</output>
</div>
</template>
<script>
export default {
name: 'RangeSlider',
data() {
return {
current: 50,
oldValue:0,
silderMax: 100,
sliderStep: 2.5,
sliderMin: 2.5,
}
},
watch: {
current: function(val, oldVal) {
if(parseFloat(oldVal) > val) {
if(val > 20 && val < 100) {
this.silderMax = 100
} else if (val < 20) {
this.silderMax = 30
}
} else if(parseFloat(oldVal) < val) {
if(val > 7.5 && val < 60) {
this.silderMax = 100
} else if(val > 60 && val < 500) {
this.silderMax = 600;
} else if(val > 500 && val < 1000) {
this.silderMax = 1200;
} else {
this.silderMax = 2000;
}
}
},
},
}
</script>

Related

Range slider next and prev values always going to next value when moving

I write a code for range slider with some specific range values
[1000,2000,3000,4000,5000,6000,7000,8000,9000,10000,11000,12000,13000,14000,15000,16000,17000,18000,19000,20000,21000,22000,23000,24000, 25000,30000,35000,40000,45000, 50000, 60000,70000, 80000, 90000, 100000]
but when I move the slider curser in-between 4000-5000 for example 4320 it always goes to 5000 in-fact I want to move it on 4000 when moving slider to backword.
Also background-color behaving weirdly due to slider jumps.
this is how my JS looks like:
const slider = document.getElementById("myinput")
const min = parseInt(slider.min)
const max = parseInt(slider.max)
const value = parseInt(slider.value)
slider.style.background = `linear-gradient(to right, #0080FF 0%, #0080FF ${(value-min)/(max-min)*100}%, #596680 ${(value-min)/(max-min)*100}%, #596680 100%)`
slider.oninput = function() {
this.style.background = `linear-gradient(to right, #0080FF 0%, #0080FF ${(this.value-this.min)/(this.max-this.min)*100}%, #596680 ${(this.value-this.min)/(this.max-this.min)*100}%, #596680 100%)`
};
//
var arr = [1000,2000,3000,4000,5000,6000,7000,8000,9000,10000,11000,12000,13000,14000,15000,16000,17000,18000,19000,20000,21000,22000,23000,24000, 25000,30000,35000,40000,45000, 50000, 60000,70000, 80000, 90000, 100000];
var ele = document.querySelector('.slider')
ele.setAttribute('step', arr[0]);
var i = 0;
function a() {
ele.removeAttribute('step')
var value = ele.value
for (i = 0; i < arr.length; i++) {
if (arr[i] > value) {
ele.value = arr[i]
break;
}
}
document.querySelector('span').innerHTML = ele.value
}
//
// Add a change event listener to the range slider
slider.addEventListener('change', function() {
// Get the value of the range slider
var value = parseInt(this.value);
var container = document.querySelector('#rangeValue');
let cost;
if (value === 1000) {
cost = 0.0350;
} else if (value > 1000 && value <= 2000) {
cost = 0.0340;
} else if (value > 2000 && value <= 3000) {
cost = 0.0329;
} else if (value > 3000 && value <= 4000) {
cost = 0.0319;
} else if (value > 4000 && value <= 5000) {
cost = 0.031;
} else if (value > 5000 && value <= 6000) {
cost = 0.0301;
} else if (value > 6000 && value <= 7000) {
cost = 0.0292;
} else if (value > 7000 && value <= 8000) {
cost = 0.0283;
} else if (value > 8000 && value <= 9000) {
cost = 0.0274;
} else if (value > 9000 && value <= 10000) {
cost = 0.0266;
} else if (value > 10000 && value <= 11000) {
cost = 0.0258;
} else if (value > 11000 && value <= 12000) {
cost = 0.025;
} else if (value > 12000 && value <= 13000) {
cost = 0.0243;
} else if (value > 13000 && value <= 14000) {
cost = 0.0236;
} else if (value > 14000 && value <= 15000) {
cost = 0.0228;
} else if (value > 15000 && value <= 16000) {
cost = 0.0222;
} else if (value > 16000 && value <= 17000) {
cost = 0.0215;
} else if (value > 17000 && value <= 18000) {
cost = 0.0209;
} else if (value > 18000 && value <= 19000) {
cost = 0.0202;
} else if (value > 19000 && value <= 20000) {
cost = 0.0196;
} else if (value > 20000 && value <= 21000) {
cost = 0.019;
} else if (value > 21000 && value <= 22000) {
cost = 0.0185;
} else if (value > 22000 && value <= 23000) {
cost = 0.0179;
} else if (value > 23000 && value <= 24000) {
cost = 0.0174;
} else if (value > 24000 && value <= 25000) {
cost = 0.0168;
} else if (value > 25000 && value <= 30000) {
cost = 0.0163;
} else if (value > 30000 && value <= 35000) {
cost = 0.0159;
} else if (value > 35000 && value <= 40000) {
cost = 0.0154;
} else if (value > 40000 && value <= 45000) {
cost = 0.0149;
} else if (value > 45000 && value <= 50000) { //check
cost = 0.0145;
} else if (value > 50000 && value <= 60000) {
cost = 0.014;
} else if (value > 60000 && value <= 70000) {
cost = 0.0136;
} else if (value > 70000 && value <= 80000) {
cost = 0.0132;
} else if (value > 80000 && value <= 90000) {
cost = 0.0128;
} else if (value > 90000 && value <= 100000) {
cost = 0.0124;
}
var totval = value * cost;
totval = totval.toFixed(2);
container.innerHTML = totval;
// Print the value to the console
// console.log(value);
});
const
range = document.getElementById('myinput'),
rangeV = document.getElementById('rangeV'),
setValue = () => {
const
newValue = Number((range.value - range.min) * 100 / (range.max - range.min)),
newPosition = 10 - (newValue * 0.2);
rangeV.innerHTML = `<span>${range.value}</span>`;
rangeV.style.left = `calc(${newValue}% + (${newPosition}px))`;
};
document.addEventListener("DOMContentLoaded", setValue);
range.addEventListener('input', setValue);
JSFIDDLE of all the code

I found the solution to my problem.
This code will set the value of the slider to the nearest value in the array when the user moves the slider. It will also maintain the slider value when moving backward.
It also removes the unnecessary variable assignments and the for loop that was causing the background color to jump.
const slider = document.getElementById("myinput");
slider.oninput = function() {
this.style.background = `linear-gradient(to right, #0080FF 0%, #0080FF ${(this.value-this.min)/(this.max-this.min)*100}%, #596680 ${(this.value-this.min)/(this.max-this.min)*100}%, #596680 100%)`;
};
// Add a change event listener to the range slider
slider.addEventListener('change', function() {
// Get the value of the range slider
var value = parseInt(this.value);
var container = document.querySelector('#rangeValue');
// Set the value of the slider to the nearest value in the array
var arr = [1000,2000,3000,4000,5000,6000,7000,8000,9000,10000,11000,12000,13000,14000,15000,16000,17000,18000,19000,20000,21000,22000,23000,24000, 25000,30000,35000,40000,45000, 50000, 60000,70000, 80000, 90000, 100000];
var nearest = arr.reduce(function (prev, curr) {
return (Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev);
});
if (value < nearest) {
nearest = arr[arr.indexOf(nearest) - 1];
}
this.value = nearest;
// display the value on the slider
document.querySelector('span').innerHTML = this.value;
});

How to set custom step input value?

I need to change the step according to input number value but it does not work right. If the value is 20 step is 2 but it gives 21, 23, 25... instead of 22, 24, 26... Why? How can I solve it?
$(function() {
$('#points').on('input change', function() {
var element = $('#points'),
deger = element.val(),
adim;
// Set rules here
if (deger < 20) {
adim = 1;
} else if (deger >= 20 && deger < 50) {
adim = 2;
} else if (deger >= 50 && deger < 100) {
adim = 5;
} else if (deger >= 100 && deger < 200) {
adim = 10;
} else {
adim = 50;
}
element.attr('step', adim);
$('#deger').text(deger);
$('#adim').text(adim);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html>
<div>
Value: <span id="deger"></span>
</div>
<div>
Current step: <span id="adim"></span>
</div>
<div>
<input id="points" type="number" step="4" value="12" min="1" max="10000" />
</div>

Apparently, the problem is the min attribute. Since you have min="1" when you are at 20 it goes first on 21 (because min is 1) and then starts with the correct step.
To solve simply update the min attribute also.
element.attr('step', adim);
element.attr('min', adim);
With this you can go backwards
$(function() {
var adim;
$('#points').on('input', function() {
var element = $('#points'),
deger = element.val()
// Set rules here
if (deger < 20) {
adim = 1;
} else if (deger == 20) {
adim = adim === 2 ? 1 : 2;
} else if (deger == 50) {
adim = adim == 5 ? 2 : 5;
} else if (deger == 100) {
adim = adim == 10 ? 5 : 10;
} else if (deger == 200) {
adim = adim == 50 ? 10 : 50;
}
element.attr('step', adim);
element.attr('min', adim);
$('#deger').text(deger);
$('#adim').text(adim);
});
});

Betfair like Odds increment and decrement

Please help me it is very irritating. Don't know why my logic is failed every time.
I am trying to make Betfair like odds increment in my web project. Betfair have it's own price group which can be found here
LINK: https://api.developer.betfair.com/services/webapps/docs/display/1smk3cen4v3lu3yomq5qye0ni/Betfair+Price+Increments
Here is explanation:
if odds is 1.01 and some body want to increase that odds via html5 number spinner the increment will be 0.01 and if odds is 2 the increment will be 0.02. whole increment list is available in that link.
working example can be found in betfair's betslip.
here is my Javascript:
function getIncremantal(fval) {
var val = parseFloat(fval);
var step;
if (val <= 1.99) {
step = 0.01;
} else if (val > 2 && val < 3) {
step = 0.02;
} else if (val > 3 && val < 4) {
step = 0.05;
} else if (val > 4 && val < 6) {
step = 0.1;
} else if (val > 6 && val < 10) {
step = 0.2;
} else if (val > 10 && val < 19.5) {
step = 0.5;
} else if (val >= 20 && val < 30) {
step = 1;
} else if (val >= 30 && val < 50) {
step = 2;
} else if (val >= 50 && val < 100) {
step = 5;
} else if (val >= 100 && val < 1000) {
step = 10;
} else if (val > 1000) {
step = null;
}
return step;
}
Update: jsFiddle
http://jsfiddle.net/71fs0a67/1/

I tried the following which is not using number stepping, but if you use the buttons it does work. It is an alternate solution, sorry if its not what you are looking for.
HTML:
<input type="number" min="1.01" max="1000" id="num"/>
<button class="increment">+</button>
<button class="decrement">-</button>
Javascript:
$('.increment').on('click', function() {
var elem = $('#num');
var value = parseFloat(elem.val());
var result = +(value + getIncremantal(value)).toFixed(2);
elem.val(result);
});
$('.decrement').on('click', function() {
var elem = $('#num');
var value = parseFloat(elem.val());
var result = +(value - getDecremantal(value)).toFixed(2);
elem.val(result);
});
function getIncremantal(val) {
var step;
if (val < 2) {
step = 0.01;
} else if (val >= 2 && val < 3) {
step = 0.02;
} else if (val >= 3 && val < 4) {
step = 0.05;
} else if (val >= 4 && val < 6) {
step = 0.1;
} else if (val >= 6 && val < 10) {
step = 0.2;
} else if (val >= 10 && val < 20) {
step = 0.5;
} else if (val >= 20 && val < 30) {
step = 1;
} else if (val >= 30 && val < 50) {
step = 2;
} else if (val >= 50 && val < 100) {
step = 5;
} else if (val >= 100 && val < 1000) {
step = 10;
} else if (val > 1000) {
step = null;
}
return step;
}
function getDecremantal(val) {
var step;
if (val <= 2) {
step = 0.01;
} else if (val > 2 && val <= 3) {
step = 0.02;
} else if (val > 3 && val <= 4) {
step = 0.05;
} else if (val > 4 && val <= 6) {
step = 0.1;
} else if (val > 6 && val <= 10) {
step = 0.2;
} else if (val > 10 && val <= 20) {
step = 0.5;
} else if (val > 20 && val <= 30) {
step = 1;
} else if (val > 30 && val <= 50) {
step = 2;
} else if (val > 50 && val <= 100) {
step = 5;
} else if (val > 100 && val <= 1000) {
step = 10;
} else if (val > 1000) {
step = null;
}
return step;
}
http://jsfiddle.net/71fs0a67/7/
With jquery ui spinner, you can do something like this:
$( "#spinner" ).spinner({
min: 1.01,
max: 1000,
step: 0.01,
spin: function( event, ui ) {
event.preventDefault();
event.stopPropagation();
var value = this.value || ui.value;
value = parseFloat(value);
var step;
if ($(event.currentTarget).hasClass('ui-spinner-up')) {
step = getIncremantal(value);
value = +(value + step).toFixed(2);
$( "#spinner" ).spinner('value', value);
} else {
step = getDecremantal(value);
value = +(value - step).toFixed(2);
$( "#spinner" ).spinner('value', value);
}
}
});
http://jsfiddle.net/71fs0a67/9/

Your code will return undefined for whole numbers.
Change all instances of val > number to val >= number

Try this:
function getIncremantal(fval) {
var val = parseFloat(fval);
var step;
if (val < 2) {
step = 0.01;
} else if (val >= 2 && val < 3) {
step = 0.02;
} else if (val >= 3 && val < 4) {
step = 0.05;
} else if (val >= 4 && val < 6) {
step = 0.1;
} else if (val >= 6 && val < 10) {
step = 0.2;
} else if (val >= 10 && val < 20) {
step = 0.5;
} else if (val >= 20 && val < 30) {
step = 1;
} else if (val >= 30 && val < 50) {
step = 2;
} else if (val >= 50 && val < 100) {
step = 5;
} else if (val >= 100 && val < 1000) {
step = 10;
} else if (val > 1000) {
step = null;
}
return step;
}
function getDecremantal(fval) {
var val = parseFloat(fval);
var step;
if (val <= 2) {
step = 0.01;
} else if (val > 2 && val <= 3) {
step = 0.02;
} else if (val > 3 && val <= 4) {
step = 0.05;
} else if (val > 4 && val <= 6) {
step = 0.1;
} else if (val > 6 && val <= 10) {
step = 0.2;
} else if (val > 10 && val <= 20) {
step = 0.5;
} else if (val > 20 && val <= 30) {
step = 1;
} else if (val > 30 && val <= 50) {
step = 2;
} else if (val > 50 && val <= 100) {
step = 5;
} else if (val > 100 && val <= 1000) {
step = 10;
} else if (val > 1000) {
step = null;
}
return step;
}

Javascript Function Parameter Update

I am running into a problem here trying to create a product showcase. Here is my Javascript code: http://codeshare.io/MeJQi
The slider for this code is for is here live at: http://therrd.com/screening.html#tenant-Screening
I can land on this specific page in two ways. One way is a button on another page that changes the default FROM of the slider to land on 15 Units which shows "Product25". Then the other way of landing on this page is where the slider is on default start value of 30 Unit and shows "Product1".
The problem I am having is changing the default product when I land on this page by clicking on the button on the other page, the slider updates but the showing product does not.
I would like to change the default value for the showProduct() based on the slider.
<script>
$(function() {
init();
});
function init()
{
hideAllProducts();
showProduct(1);
vals = {max: 2000, min: 1, def: 20} //use your own values here for max min and def
var param = window.location.href.split("slide=");
slide = isNaN(param[param.length - 1]) ||
param[param.length - 1] > vals.max ||
param[param.length - 1] < vals.min ? vals.def : param[param.length - 1];
//check if there is a url param, if it's a number and if it's in range
$("#screeningSlider").ionRangeSlider({
hide_min_max: true,
keyboard: true,
from: slide,
min: 1,
max: 2000,
step: 0,
grid_num: 4,
prettify_separator: ",",
postfix: " Units",
max_postfix: "+",
force_edges: true,
onStart: function (value) {
document.getElementById("value").innerHTML = (value.from);
},
onChange: function (value) {
document.getElementById("value").innerHTML = (value.from);
},
onFinish: function (value) {
document.getElementById("value").innerHTML = (value.from);
},
onUpdate: function (value) {
document.getElementById("value").innerHTML = (value.from);
}
});
$("#screeningSlider").on("change", function () {
var $this = $(this),
value = $this.prop("value");
productSliderOnChange(value);
});
}
function productSliderOnChange(value)
{
$("#value").text(value);
if(value == 0)
hideAllProducts();
else if ((value > 0) && (value <= 20))
{
hideAllProducts();
showProduct(25);
}
else if ((value >= 21) && (value <= 60))
{
hideAllProducts();
showProduct(1);
}
else if ((value >= 61) && (value <= 120))
{
hideAllProducts();
showProduct(2);
}
else if ((value >= 121) && (value <= 180))
{
hideAllProducts();
showProduct(3);
}
else if ((value >= 181) && (value <= 360))
{
hideAllProducts();
showProduct(4);
}
else if ((value >= 361) && (value <= 580))
{
hideAllProducts();
showProduct(5);
}
else if ((value >= 581) && (value <= 780))
{
hideAllProducts();
showProduct(6);
}
else if ((value >= 781) && (value <= 980))
{
hideAllProducts();
showProduct(7);
}
else if ((value >= 981) && (value <= 1180))
{
hideAllProducts();
showProduct(8);
}
else if ((value >= 1181) && (value <= 1380))
{
hideAllProducts();
showProduct(9);
}
else if ((value >= 1381) && (value <= 1580))
{
hideAllProducts();
showProduct(10);
}
else if ((value >= 1581) && (value <= 1780))
{
hideAllProducts();
showProduct(11);
}
else if ((value >= 1781) && (value <= 1980))
{
hideAllProducts();
showProduct(12);
}
else if ((value > 1981))
{
hideAllProducts();
showProduct(13);
}
else {
hideAllProducts();
showProduct(1);
}
}
function hideAllProducts()
{
$("#Product25").hide();
$("#Product1").hide();
$("#Product2").hide();
$("#Product3").hide();
$("#Product4").hide();
$("#Product5").hide();
$("#Product6").hide();
$("#Product7").hide();
$("#Product8").hide();
$("#Product9").hide();
$("#Product10").hide();
$("#Product11").hide();
$("#Product12").hide();
$("#Product13").hide();
}
function showProduct(productId)
{
var product = "#Product" + productId;
$(product).show();
}
</script>

Uploading bar is not syncing with actual progress. what should i do?

Below is my code:
<script type="text/javascript">
window.onload = function ()
{
hideProgress();
}
function showProgress()
{
$(function ()
{
$("#dialog-modal").dialog(
{
height: 70,`
width: 450,
modal: true,
resizable: false
});
$(".ui-dialog-titlebar").hide();
$("#progressbar").progressbar({
value: 0
});
});
updateProgessBar();
}
function hideProgress()
{
$("#dialog-modal").dialog('close');
}
function updateProgessBar() {
var currentProgress = $("#progressbar").progressbar("value");
currentProgress = currentProgress + 2;
$("#progressbar").progressbar("value", currentProgress);
if (currentProgress < 10) {
var temp = setTimeout("updateProgessBar();", 500);
}
else if (currentProgress >= 10 && currentProgress < 30) {
var temp = setTimeout("updateProgessBar();", 1000);
}
else if (currentProgress >= 30 && currentProgress < 45) {
var temp = setTimeout("updateProgessBar();", 1500);
}
else if (currentProgress >= 45 && currentProgress < 60) {
var temp = setTimeout("updateProgessBar();", 2000);
}
else if (currentProgress >= 60 && currentProgress < 80) {
var temp = setTimeout("updateProgessBar();", 2500);
}
else if (currentProgress >= 80 && currentProgress < 95) {
var temp = setTimeout("updateProgessBar();", 3000);
}
else if (currentProgress >= 95) {
}
}
function CheckValidation() {
if (Page_ClientValidate()) {
// Call Your custom JS function and return value.
showProgress();
return true;
}
else {
return false;
}
}
</script>

Categories