dqqfuth6736
2014-04-27 10:15
浏览 229

noUiSlider在页面加载时设置值

I'm using the noUiSlider on a new project of mine.

I have the element within a form that allows the user to select a range of price (min and max). When the form is submitted both values are used in the code to filter items of a range between these two selected prices.

HTML/PHP:

<div id="m-price"></div>

<div class="field field-range">
    <input type="text" min="0" max="5000" step="100" id="price-min" name="price-min" value="<?php echo ($_POST['price-min']) ? $_POST['price-min'] : ''; ?>">
</div>

<div class="field field-range">
    <input type="text" min="0" max="5000" step="100" id="price-max" name="price-max" value="<?php echo ($_POST['price-max']) ? $_POST['price-max'] : ''; ?>">
</div>

JS:

$('#m-price').noUiSlider({
    range: {
        'min': 0,
        'max': 500
    }
    ,step: 100
    ,start: [0,500]
    ,connect: true
    ,serialization: {
        lower: [
            $.Link({
                target: $('#price-min'),
                format: {
                    decimals: 3,
                    mark: ','
                }
            })
        ],
        upper: [
            $.Link({
                target: $('#price-max'),
                format: {
                    decimals: 3,
                    mark: ','
                }
            })
        ]
    }
});

Now this is currently working perfectly, however, I have on the form elements an 'if value exists set that value to the form input(s) value' every time the page reloads (just like a sticky form thing so the user knows what they searched for).

The way the noUiSlider works this is not possible as the element initializes on page load and the values are set using 'start: [0,500]'. I notice there is a 'set' event but how can I use it in this scenario?

图片转代码服务由CSDN问答提供 功能建议

我正在使用 noUiSlider 关于我的一个新项目。

我在表单中有元素,允许用户选择一个价格范围(最小和最大)。 提交表单时,代码中将使用这两个值来过滤这两个选定价格之间范围的项目。

HTML / PHP:

  &lt; div id =“m-price”&gt;&lt; / div&gt; 
 
&lt; div class =“field field-range”&gt; 
&lt; input type =“text”min =“0  “max =”5000“step =”100“id =”price-min“name =”price-min“value =”&lt;?php echo($ _POST ['price-min'])?$ _POST ['价格 -min']:'';?&gt;“&gt; 
&lt; / div&gt; 
 
&lt; div class =”field field-range“&gt; 
&lt; input type =”text“min =”0  “max =”5000“step =”100“id =”price-max“name =”price-max“value =”&lt;?php echo($ _POST ['price-max'])?$ _POST ['价格 -max']:'';?&gt;“&gt; 
&lt; / div&gt; 
   
 
 

JS:

   $('#m-price')。noUiSlider({
 range:{
'min':0,
'max':500 
} 
,步骤:100 
,开始:  [0,500] 
,connect:true 
,序列化:{
 lower:[
 $ .Link({
 target:$('#price-min'),
格式:{
小数:  3  ,
标记:','
} 
})
],
 upper:[
 $ .Link({
 target:$('#price-max'),
格式:{  
小数:3,
标记:','
} 
})
] 
} 
}); 
   
 
 

现在这个 目前工作正常,但是,每次页面重新加载时,我在表单元素上都有一个'if value exists set value to form input(s)value'(就像一个粘性形式的东西,所以用户知道他们搜索了什么 )。

noUiSlider的工作方式是不可能的,因为元素在页面加载时初始化,并且使用'start:[0,500]'设置值。 我注意到有一个'set'事件,但我怎么能在这种情况下使用它?

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • drccfl9407 2014-04-27 15:29
    已采纳

    This could be solved by setting the value to the slider, instead of to the inputs. Basically, you would get your variable from the POST, and get that to javascript:

    <?php 
        $min = $_POST['price-min'];
        $max = $_POST['price-max'];
    ?>
    
    <script>var startValues = [<?php
        echo isset($min) ? $min : 0;
    ?>, <?php
        echo isset($max) ? $max : 500;
    ?>];</script>
    

    Now, you have a value to initiate your slider with:

    $('#m-price').noUiSlider({
        ...
        start: startValues 
        ...
    });
    

    The Link elements will then write these values to the inputs, or, if they weren't set, default to your initial start values of 0 and 500.

    已采纳该答案
    打赏 评论

相关推荐 更多相似问题