如何让jQuery UI双柄滑块值在roller()函数中生效？

Hey there! Let's get your roller function properly using the dynamic range from your double-handle slider. The main issues were that your slider values weren't initialized on page load, and you weren't fetching the latest slider values when rolling. Here's the complete fix:

Key Fixes Explained #

• Initialize Slider Values on Page Load: Trigger the slide event manually after setting up the slider to populate the input field and log initial values immediately.
• Fetch Slider Values Dynamically: Instead of relying on global variables (which can get out of sync), pull the current slider values directly in the roller() function every time it runs.
• Fix Logic Conditions: Correct the range check conditions to properly use the slider's low/high values instead of hardcoded numbers.

Modified Full Code #

HTML & JavaScript #

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.theme.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<title>ROLLER</title>
</head>
<body>
<div class="wrapper">
<div class="whitespace"></div>
<div class="bignumber" id="number">50</div>
<div class="whitespace"></div>
<div class="whitespace"></div>
<div class="rangetext" id="slidervalue">
<label for="slidenumbers">NUMBER RANGE</label></div>
<input type="text" id="slidenumbers" name="slidenumbers">
<div class="rangeslider">
<div id="slider"></div>
</div>
<button class="rollonce" onclick="luckynumber(); roller()">ROLL</button>
<script>
// Initialize slider and trigger slide event to set initial values
$('#slider').slider({
slide: function(event, ui) {
$('#slidenumbers').val(ui.values[0] + " - " + ui.values[1]);
const bottom = ui.values[0];
const top = ui.values[1];
console.log("BOTTOM VALUE - ", bottom);
console.log("TOP VALUE - ", top);
console.log(" --- WIN PERCENT CHANCE --- ", (top - bottom),"%");
},
min: 5,
max: 95,
values: [15, 85],
step: 1,
range: true,
orientation: "horizontal"
}).trigger('slide'); // Trigger slide event on page load to initialize values

let lucky;

function roller() {
// Get current slider values every time we roll
const sliderValues = $('#slider').slider('option', 'values');
const lowNumber = sliderValues[0];
const highNumber = sliderValues[1];

const random = Math.floor((Math.random() * 99) + 1);
document.getElementById('number').innerText = random;
console.log("Your rolled number:", random);

// Update logic to use dynamic slider values
if (random === lucky) {
// Jackpot: lucky number match
document.getElementById('number').className = 'bignumber';
console.log("MATCH! - LUCKY NUMBER:", lucky, "RANDOM NUMBER:", random);
} else if (random > lowNumber && random < highNumber) {
// Within range (not lucky)
document.getElementById('number').className = 'bignumber2';
} else {
// Outside range (not lucky)
document.getElementById('number').className = 'bignumber1';
}
};

function luckynumber(){
const random1 = Math.floor((Math.random() * 99) + 1);
console.log("-------------------------");
console.log("Lucky number: ", random1);
lucky = random1;
};
</script>
</div>
</body>
</html>

CSS #

*{
box-sizing: border-box;
margin: 0;
padding: 0;
text-align: center;
}
body, html{
background: #222;
font-family: sans-serif;
height: 100%;
overflow: hidden;
}
.wrapper{
background: #000;
background-size: cover;
height: 55.9vw;
text-align: center;
width: 30%;
margin-left: 35vw;
}
.bignumber{
color: #FFFF00;
font-size: 23vw;
font-weight: 500;
font-family: sans-serif;
margin-left: 1vw;
}
.bignumber1{
color: #FF0000;
font-size: 23vw;
font-weight: 500;
font-family: sans-serif;
margin-left: 1vw;
}
.bignumber2{
color: #0000FF;
font-size: 23vw;
font-weight: 500;
font-family: sans-serif;
margin-left: 1vw;
}
.rangetext{
color: #FFFFFF;
font-size: 2.5vw;
font-weight: 300;
margin-top: 1vw;
}
.rangeslider{
height: 3vw;
margin-left: 3.5vw;
margin-top: 1vw;
position: relative;
width: 22vw;
}
#slider .ui-slider-range{
background: #0CF;
border: 1px solid #AAF;
outline: none;
}
#slider .ui-slider-handle{
background: #000;
border: 3px double #FA0;
outline: none;
}
#slidenumbers{
background: none;
border: none;
color: #AADDFF;
font-family: sans-serif;
font-size: 2vw;
height: 2.5vw;
outline: none;
width: 10vw;
}
.rollonce{
background: transparent;
border: .1vw solid rgba(255,215,0,0.8);
border-radius: 5px;
color: #AADDFF;
cursor: pointer;
font-family: sans-serif;
font-size: 3vw;
font-weight: 700;
height: 5vw;
margin-top: 3vw;
outline: none;
padding-top: 0vw;
text-align: center;
width: 22vw;
}
.rollonce:hover{
box-shadow: 0px 0px 20px 10px #FF7500
}
.whitespace{
height: 1.5vw;
width: 100%;
}

What Changed? #

1. Added .trigger('slide'): This runs the slide event handler once when the page loads, so your input field shows the initial range (15-85) and the console logs the values immediately—no more null values on page load.
2. Dynamic Value Fetching: In roller(), we use $('#slider').slider('option', 'values') to get the current low and high values of the slider every time you click ROLL. This ensures we always have the latest user-set range.
3. Simplified Logic: Reordered the conditions to check for the lucky number first, then range membership—this makes the code easier to read and avoids conflicting conditions.
4. Cleaned Up Variables: Used const for variables that don't change, and let for lucky since it gets reassigned.

内容的提问来源于stack exchange，提问作者Christopher Bennett