问题描述
默认情况下，rangeSlider插件计算的默认值为33 min和66 max。下面的代码完全可用，在第125行附近，我对我认为解决方案所在的位置有进一步的评论。删除并添加//以查看我在说什么。我希望这能引起大家的注意，并预先感谢您的任何帮助
<?PHP
$qty_min = isset($_REQUEST['qty_min']) ? $_REQUEST['qty_min'] : "33";
$qty_max = isset($_REQUEST['qty_max']) ? $_REQUEST['qty_max'] : "66";
$first_load = "false";
?>
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="utf-8" />
<Meta http-equiv="X-UA-Compatible" content="IE=edge" />
<Meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no" />
<Meta name="description" content="" />
<Meta name="author" content="" />
<title>Dashboard - SB Admin</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/css/ion.rangeSlider.min.css" />
<style>
/* RANGE SLIDER BAR REGULAR CSS */
.primaryText{
font-weight: 300;
font-size: 50px;
text-shadow: 2px 2px 1px rgba(0,0.3);
}
.secondaryText{
font-weight: 300;
font-size: 25px;
}
.createdBy {
font-weight: 300;
font-size: 17px;
margin-top: 10px;
}
.createdBy a{
color: #333;
font-weight: 500;
}
.message {
background: white;
padding: 10px;
display: inline-block;
text-align: center;
color: #000;
margin: 25px 0;
font-size: 13px;
Box-shadow: 2px 2px 0px 1px rgba(0,0.2);
border-radius: 4px;
}
.projHeader{
text-align: center;
}
.footer{position: fixed; bottom: 0; right: auto; top: auto; left: 0; border-top: 1px solid rgba(0,0.5); width: 100%; transform: translate(0); border: none; padding: 0; text-align: center; border-top: 1px solid #bfc7e4;}
.footer div{display: inline-block;}
.footer a.social{display: inline-block; font-size: 17px; padding: 7px 0; color: #000; text-decoration: none; margin: 0px 20px;}
body{background: #333; font-family: poppins;}
.projHeader,.createdBy a,.message{color: #fff;}
.message{background: rgba(255,255,0.1);}
.demoContainer{position: absolute; left: 50%; top: 40%; transform: translate(-50%,-50%); width: 400px;}
.sliderContainer{position: relative; border-radius: 20px;
background: #6a6a6a; width: 400px; height: 10px; margin-top: 40px;}
.sliderContainer:after{content:""; clear: both; display: block; }
.slider{height: 10px; float: left;}
.slider_a{background: transparent;}
.slider_b{background: #fd1874; border-radius: 20px;}
.slider_c{background: transparent;}
.slider_adj{position: absolute; padding: 3px 10px; background: #fff; top: 12px; cursor: move; user-select: none; z-index: 1; font-size: 13px; color: #333; border-radius: 20px; width: 20px; text-align: center;}
.slider_adj_1{top: -28px;}
.slider_adj_2{z-index: 3}
</style>
<div class="projHeader">
<div style="background:rgb(124,124,124);padding-bottom:40px;">
<div style="color:white;font-size:16px;font-weight: 100"> Slide the numbered ovals to select your desired range.</div>
<div align="center">
<div class="sliderContainer" id="sliderContainer">
<input type="hidden" name="qty_min" id="qty_min" value="<?PHP echo $qty_min ?>" placeholder="<?PHP echo $qty_min ?>" />
<input type="hidden" name="qty_max" id="qty_max" value="<?PHP echo $qty_max ?>" placeholder="<?PHP echo $qty_max ?>" />
<div class="slider slider_a" id="slider_a"></div>
<div class="slider slider_b" id="slider_b"></div>
<div class="slider slider_c" id="slider_c"></div>
<div style="width:70px" class="slider_adj slider_adj_1" id="slider_adj_1"></div>
<div style="width:70px" class="slider_adj slider_adj_2" id="slider_adj_2"></div>
</div>
</div>
</div>
<div style="color:white"> var-a_wt = <span id="var-a_wt"></span></div>
<div style="color:white"> var-b_wt = <span id="var-b_wt"></span></div>
<div style="color:white"> var-c_wt = <span id="var-c_wt"></span></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/js/ion.rangeSlider.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
var sliderContainer,sliderContainerWt;
var sliderHandleWt;
$(document).ready(function(){
sliderContainer = $("#sliderContainer");
sliderContainerWt = sliderContainer.outerWidth();
sliderHandleWt = $("#slider_adj_1").outerWidth();
setLeftPosition();
setDraggable();
bindMouseUp();
updateGraph();
});
function setLeftPosition(){
var wt = sliderContainerWt/3;
$(".slider").css({"width": wt+"px" })
下面的两行效果很好，但是我需要即时更改默认值，然后将它们存储在数据库表中以在页面重新加载时恢复自定义值。下面的两行仅计算33和66
//var sliderHandlePos_1 = wt-sliderHandleWt/2;
//var sliderHandlePos_2 = wt*2-sliderHandleWt/2;
下面的两行工作正常，但抛弃了我的滑块的格式，最小值和最大值仍然不正确
var sliderHandlePos_1 = '<?PHP echo $qty_min ?>';
var sliderHandlePos_2 = '<?PHP echo $qty_max ?>';
$("#slider_adj_1").css({"left": sliderHandlePos_1+"px"});
$("#slider_adj_2").css({"left": sliderHandlePos_2+"px"});
}
</script>
<script>
function updateGraph(){
我认为我的解决方案是在接下来的三行代码中，但是我在javascript中的有限技能使我无法将其包裹在头上。
var a_wt = parseInt(($("#slider_a").width()/sliderContainerWt*100).toFixed(0));
var b_wt = parseInt(($("#slider_b").width()/sliderContainerWt*100).toFixed(0));
var c_wt = parseInt(($("#slider_c").width()/sliderContainerWt*100).toFixed(0));
我尝试了以下方法，但是没有运气。我只需要通过PHP从表中加载一次初始值，然后java脚本就会接管并跟踪滑块值，因为是的，我知道PHP是服务器端脚本，所以我理解为什么它不起作用。 Just and example>我需要一个JavaScript等效项。
var a_wt = <?PHP echo $qty_min ?>;
var b_wt = <?PHP echo ($qty_max-$qty_min) ?>;
var c_wt = <?PHP echo (100-$qty_max) ?>;
我认为我的解决方案不会超出此范围。但是我当然可能是错的。
$("#slider_adj_1").html(a_wt+"%");
$("#slider_adj_2").html((b_wt+a_wt)+"%");
document.getElementById('qty_min').value = a_wt;
document.getElementById('qty_max').value = b_wt+a_wt;
document.getElementById('var-a_wt').innerHTML = a_wt;
document.getElementById('var-b_wt').innerHTML = b_wt;
document.getElementById('var-c_wt').innerHTML = c_wt;
return { a: a_wt,b: b_wt,c: c_wt
}
}
</script>
<script>
function bindMouseUp(){
$("#slider_adj_1,#slider_adj_2").on("mouSEOut",function(){
$("#slider_adj_1,#slider_adj_2").draggable( "destroy" );
});
$("#slider_adj_1,#slider_adj_2").on("mouSEOver",function(){
setDraggable();
});
}
function setDraggable(){
var maxLeft = $("#slider_a").offset().left-(sliderHandleWt/2);
var maxRight = $("#slider_b").offset().left+$("#slider_b").outerWidth()-(sliderHandleWt/2);
var startX,start_a_Wt,start_b_Wt,start_c_Wt;
$("#slider_adj_1").draggable({
axis: 'x',containment: [ maxLeft,maxRight,0 ],refreshPositions: true,start: function(event,ui){
startX = $(this).position().left;
start_a_Wt = $("#slider_a").width();
start_b_Wt = $("#slider_b").width();
},drag: function(event,ui){
var endX = $(this).position().left;
var finalX = endX - startX;
var slider_a = start_a_Wt + finalX;
var slider_b = start_b_Wt - finalX;
$("#slider_a").css("width",slider_a+"px");
$("#slider_b").css("width",slider_b+"px");
updateGraph();
},stop: function(event,ui){
maxLeft = $("#slider_a").position().left;
maxRight = $("#slider_c").position().left;
}
});
var maxLeft_2 = $("#slider_a").offset().left+$("#slider_a").outerWidth()-(sliderHandleWt/2);
var maxRight_2 = $("#slider_a").offset().left+sliderContainerWt-(sliderHandleWt/2);
$("#slider_adj_2").draggable({
axis: 'x',containment: [ maxLeft_2,maxRight_2,ui){
startX = $(this).position().left;
start_b_Wt = $("#slider_b").width();
start_c_Wt = $("#slider_c").width();
},ui){
var endX = $(this).position().left;
var finalX = endX - startX;
var slider_b = start_b_Wt + finalX;
var slider_c = start_c_Wt - finalX;
$("#slider_b").css("width",slider_b+"px");
$("#slider_c").css("width",slider_c+"px");
updateGraph();
},ui){
maxLeft_2 = $("#slider_b").offset().left;
maxRight_2 = $("#slider_c").offset().left + $("#slider_c").width();
}
});
}
</script>
解决方法
我完全走错了路。在进一步阅读PROPER文档后，我想出了以下功能完全正常的代码，以防万一这对其他人有所帮助。我还将展示如何分解my_range变量，以便现在可以将这些变量存储在数据库表中。很棒的文档，http://ionden.com/a/plugins/ion.rangeSlider/start.html
<?php
$my_range = isset($_REQUEST['my_range']) ? $_REQUEST['my_range'] : "";
$split_range = (explode(";",$my_range));
$qty_min = $split_range[0];
$qty_max = $split_range[1];
?>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/css/ion.rangeSlider.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/js/ion.rangeSlider.min.js"></script>
<form action="slider_test2.php" method="post">
<input style="color:blue" type="text" class="js-range-slider" name="my_range" value="" />
<br>
<?php echo "my_range = " . $my_range; ?>
<?php echo "<br>qty_min = " . $qty_min; ?>
<?php echo "<br>qty_max = " . $qty_max; ?>
<br>
<button type="submit" >submit</button>
</form>
<script>
$(".js-range-slider").ionRangeSlider({
type: "double",grid: true,min: 1,max: 100,from: <?php echo $qty_min ?>,to: <?php echo $qty_max ?>,postfix: "%",skin: "big"
});
</script>