jRange
jRange copied to clipboard
Published
20 hours ago •
nitinhayaran
nitinhayaran
two range on single page
How build two range slider on one page(this code only show one range) ?
<div class="ui vertical menu mmm" style="
position: absolute;
margin-right: 15.5%;
">
<div class="item">
<strong>price 1</strong>
<div class="menu">
<div class="parent">
<input type="hidden" class="range-slider-15 range-change-item-15" id="15" min="1" max="100" name="قیمت" style="padding-top: 10px;" value="23,100">
</div>
<script type="text/javascript" charset="utf-8">
window.onload = function(){
$('.range-change-item-15').change(function(){
var changed_range=$(this);
setTimeout(function(){
function gup( name, url ) {
if (!url) url = location.href;
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regexS = "[\\?&]"+name+"=([^&#]*)";
var regex = new RegExp( regexS );
var results = regex.exec( url );
return results == null ? null : results[1];
}
window.location='/home/range?min='+$(changed_range).val().replace(',','000000&max=')+'000000000&filter_name='+$(changed_range).attr('name')+'&prop='+ gup('prop', document.location.search);
},2500);
var range=$('.range-slider-15').val().split(',');
$('.range-change-item-15').jRange({
from: 1,
to: 100,
step: 1,
scale:[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99, 100],
width: $('.mmm').width()-20,
format: '%s',
showLabels: true,
isRange : true
});
};
</script>
</div>
</div>
<div class="item">
<strong>price 2</strong>
<div class="menu">
<div class="parent">
<input type="hidden" class="range-slider-16 range-change-item-16" id="16" min="1" max="100" name="قیمت۲" style="padding-top: 10px; display: none;" value="23,100"><div class="slider-container theme-green" style="width: 200px;"> <div class="back-bar"> <div class="selected-bar" style="width: 148px; left: 42px;"></div> <div class="pointer low" style="left: 36px;"></div><div class="pointer-label low" style="left: 38.2222px;">۲۳</div> <div class="pointer high" style="left: 184px;"></div><div class="pointer-label high" style="left: 178px;">۱۰۰</div> <div class="clickable-dummy"></div> </div> <div class="scale"><span style="left: 0%"><ins style="margin-left: -2.5px;">1</ins></span><span style="left: 1%"><ins style="margin-left: -2.5px;">2</ins></span><span style="left: 2%"><ins style="margin-left: -2.5px;">3</ins></span><span style="left: 3%"><ins style="margin-left: -2.5px;">4</ins></span><span style="left: 4%"><ins style="margin-left: -2.5px;">5</ins></span><span style="left: 5%"><ins style="margin-left: -2.5px;">6</ins></span><span style="left: 6%"><ins style="margin-left: -2.5px;">7</ins></span><span style="left: 7%"><ins style="margin-left: -2.5px;">8</ins></span><span style="left: 8%"><ins style="margin-left: -2.5px;">9</ins></span><span style="left: 9%"><ins style="margin-left: -4.5px;">10</ins></span><span style="left: 10%"><ins style="margin-left: -4.5px;">11</ins></span><span style="left: 11%"><ins style="margin-left: -4.5px;">12</ins></span><span style="left: 12%"><ins style="margin-left: -4.5px;">13</ins></span><span style="left: 13%"><ins style="margin-left: -4.5px;">14</ins></span><span style="left: 14%"><ins style="margin-left: -4.5px;">15</ins></span><span style="left: 15%"><ins style="margin-left: -4.5px;">16</ins></span><span style="left: 16%"><ins style="margin-left: -4.5px;">17</ins></span><span style="left: 17%"><ins style="margin-left: -4.5px;">18</ins></span><span style="left: 18%"><ins style="margin-left: -4.5px;">19</ins></span><span style="left: 19%"><ins style="margin-left: -4.5px;">20</ins></span><span style="left: 20%"><ins style="margin-left: -4.5px;">21</ins></span><span style="left: 21%"><ins style="margin-left: -4.5px;">22</ins></span><span style="left: 22%"><ins style="margin-left: -4.5px;">23</ins></span><span style="left: 23%"><ins style="margin-left: -4.5px;">24</ins></span><span style="left: 24%"><ins style="margin-left: -4.5px;">25</ins></span><span style="left: 25%"><ins style="margin-left: -4.5px;">26</ins></span><span style="left: 26%"><ins style="margin-left: -4.5px;">27</ins></span><span style="left: 27%"><ins style="margin-left: -4.5px;">28</ins></span><span style="left: 28%"><ins style="margin-left: -4.5px;">29</ins></span><span style="left: 29%"><ins style="margin-left: -4.5px;">30</ins></span><span style="left: 30%"><ins style="margin-left: -4.5px;">31</ins></span><span style="left: 31%"><ins style="margin-left: -4.5px;">32</ins></span><span style="left: 32%"><ins style="margin-left: -4.5px;">33</ins></span><span style="left: 33%"><ins style="margin-left: -4.5px;">34</ins></span><span style="left: 34%"><ins style="margin-left: -4.5px;">35</ins></span><span style="left: 35%"><ins style="margin-left: -4.5px;">36</ins></span><span style="left: 36%"><ins style="margin-left: -4.5px;">37</ins></span><span style="left: 37%"><ins style="margin-left: -4.5px;">38</ins></span><span style="left: 38%"><ins style="margin-left: -4.5px;">39</ins></span><span style="left: 39%"><ins style="margin-left: -4.5px;">40</ins></span><span style="left: 40%"><ins style="margin-left: -4.5px;">41</ins></span><span style="left: 41%"><ins style="margin-left: -4.5px;">42</ins></span><span style="left: 42%"><ins style="margin-left: -4.5px;">43</ins></span><span style="left: 43%"><ins style="margin-left: -4.5px;">44</ins></span><span style="left: 44%"><ins style="margin-left: -4.5px;">45</ins></span><span style="left: 45%"><ins style="margin-left: -4.5px;">46</ins></span><span style="left: 46%"><ins style="margin-left: -4.5px;">47</ins></span><span style="left: 47%"><ins style="margin-left: -4.5px;">48</ins></span><span style="left: 48%"><ins style="margin-left: -4.5px;">49</ins></span><span style="left: 49%"><ins style="margin-left: -4.5px;">50</ins></span><span style="left: 50%"><ins style="margin-left: -4.5px;">51</ins></span><span style="left: 51%"><ins style="margin-left: -4.5px;">52</ins></span><span style="left: 52%"><ins style="margin-left: -4.5px;">53</ins></span><span style="left: 53%"><ins style="margin-left: -4.5px;">54</ins></span><span style="left: 54%"><ins style="margin-left: -4.5px;">55</ins></span><span style="left: 55%"><ins style="margin-left: -4.5px;">56</ins></span><span style="left: 56%"><ins style="margin-left: -4.5px;">57</ins></span><span style="left: 57%"><ins style="margin-left: -4.5px;">58</ins></span><span style="left: 58%"><ins style="margin-left: -4.5px;">59</ins></span><span style="left: 59%"><ins style="margin-left: -4.5px;">60</ins></span><span style="left: 60%"><ins style="margin-left: -4.5px;">61</ins></span><span style="left: 61%"><ins style="margin-left: -4.5px;">62</ins></span><span style="left: 62%"><ins style="margin-left: -4.5px;">63</ins></span><span style="left: 63%"><ins style="margin-left: -4.5px;">64</ins></span><span style="left: 64%"><ins style="margin-left: -4.5px;">65</ins></span><span style="left: 65%"><ins style="margin-left: -4.5px;">66</ins></span><span style="left: 66%"><ins style="margin-left: -4.5px;">67</ins></span><span style="left: 67%"><ins style="margin-left: -4.5px;">68</ins></span><span style="left: 68%"><ins style="margin-left: -4.5px;">69</ins></span><span style="left: 69%"><ins style="margin-left: -4.5px;">70</ins></span><span style="left: 70%"><ins style="margin-left: -4.5px;">71</ins></span><span style="left: 71%"><ins style="margin-left: -4.5px;">72</ins></span><span style="left: 72%"><ins style="margin-left: -4.5px;">73</ins></span><span style="left: 73%"><ins style="margin-left: -4.5px;">74</ins></span><span style="left: 74%"><ins style="margin-left: -4.5px;">75</ins></span><span style="left: 75%"><ins style="margin-left: -4.5px;">76</ins></span><span style="left: 76%"><ins style="margin-left: -4.5px;">77</ins></span><span style="left: 77%"><ins style="margin-left: -4.5px;">78</ins></span><span style="left: 78%"><ins style="margin-left: -4.5px;">79</ins></span><span style="left: 79%"><ins style="margin-left: -4.5px;">80</ins></span><span style="left: 80%"><ins style="margin-left: -4.5px;">81</ins></span><span style="left: 81%"><ins style="margin-left: -4.5px;">82</ins></span><span style="left: 82%"><ins style="margin-left: -4.5px;">83</ins></span><span style="left: 83%"><ins style="margin-left: -4.5px;">84</ins></span><span style="left: 84%"><ins style="margin-left: -4.5px;">85</ins></span><span style="left: 85%"><ins style="margin-left: -4.5px;">86</ins></span><span style="left: 86%"><ins style="margin-left: -4.5px;">87</ins></span><span style="left: 87%"><ins style="margin-left: -4.5px;">88</ins></span><span style="left: 88%"><ins style="margin-left: -4.5px;">89</ins></span><span style="left: 89%"><ins style="margin-left: -4.5px;">90</ins></span><span style="left: 90%"><ins style="margin-left: -4.5px;">91</ins></span><span style="left: 91%"><ins style="margin-left: -4.5px;">92</ins></span><span style="left: 92%"><ins style="margin-left: -4.5px;">93</ins></span><span style="left: 93%"><ins style="margin-left: -4.5px;">94</ins></span><span style="left: 94%"><ins style="margin-left: -4.5px;">95</ins></span><span style="left: 95%"><ins style="margin-left: -4.5px;">96</ins></span><span style="left: 96%"><ins style="margin-left: -4.5px;">97</ins></span><span style="left: 97%"><ins style="margin-left: -4.5px;">98</ins></span><span style="left: 98%"><ins style="margin-left: -4.5px;">99</ins></span><span style="left: 99%"><ins style="margin-left: -7px;">100</ins></span></div> </div>
</div>
<script type="text/javascript" charset="utf-8">
window.onload = function(){
$('.range-change-item-16').change(function(){
var changed_range=$(this);
setTimeout(function(){
function gup( name, url ) {
if (!url) url = location.href;
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regexS = "[\\?&]"+name+"=([^&#]*)";
var regex = new RegExp( regexS );
var results = regex.exec( url );
return results == null ? null : results[1];
}
window.location='/home/range?min='+$(changed_range).val().replace(',','000000&max=')+'000000000&filter_name='+$(changed_range).attr('name')+'&prop='+ gup('prop', document.location.search);
},2500);
});
var range=$('.range-slider-16').val().split(',');
$('.range-change-item-16').jRange({
from: 1,
to: 100,
step: 1,
scale:[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99, 100],
width: $('.mmm').width()-20,
format: '%s',
showLabels: true,
isRange : true
});
};
</script>
</div>
</div>
</div>
