admin管理员组文章数量:1410689
I'm in over my head with this stuff - I'm looking to make noUiSlider (/) work with the following form. I want to have a slider for the Minimum and Maximum price values in the form, where the slider moves up in increments of $10,000. Is this possible?
<script type="text/javascript" src=".js"></script>
<div class="unibox-search unibox-search-regular">
<div class="unibox-label">
Enter city, area, postal code or MLS(r) number:
</div>
<div class="unibox-text-field">
<input type="text" onkeydown="uniboxKeyDown(event,this)" onkeyup="uniboxKeyUp(event,this)" placeholder="Enter city, area, postal code or MLS(r) number" class="unibox-field">
<button onclick="return uniboxSubmitted(this)" name="unibox-run" class="unibox-submit">Search</button>
</div>
<div class="unibox-controls">
<select onchange="runUniboxHits(this)" name="unibox-bedrooms" class="unibox-bedrooms">
<option value="">--- Bedrooms ---</option>
<option value="1">Min. 1 bedroom</option>
<option value="2">Min. 2 bedrooms</option>
<option value="3">Min. 3 bedrooms</option>
<option value="4">Min. 4 bedrooms</option>
<option value="5">Min. 5 bedrooms</option>
</select>
<select onchange="runUniboxHits(this)" name="unibox-bathrooms" class="unibox-bathrooms">
<option value="">--- Bathrooms ---</option>
<option value="2.0">Min. 2 bathrooms</option>
<option value="3.0">Min. 3 bathrooms</option>
<option value="4.0">Min. 4 bathrooms</option>
<option value="5.0">Min. 5 bathrooms</option>
</select>
</div>
<input type="text" class="unibox-price-min" placeholder="Min Price" onfocus="uniboxResetHint('Min Price',false,this);" onblur="uniboxResetHint('Min Price',true,this);" value="Min Price" onkeyup="uniboxKeyUp(event,this)" onkeydown="uniboxKeyDown(event,this)">
<input type="text" class="unibox-price-max" placeholder="Max Price" onfocus="uniboxResetHint('Max Price',false,this);" onblur="uniboxResetHint('Max Price',true,this);" value="Max Price" onkeyup="uniboxKeyUp(event,this)" onkeydown="uniboxKeyDown(event,this)">
</div>
<div class="unibox-quick-summary-line">
<span class="unibox-quick-summary"></span><span> </span>
</div>
<input type="hidden" value="recip" class="unibox-search-context" name="recip">
<input type="hidden" value="1" class="unibox-search-region" name="34">
<input type="hidden" value="29619" class="unibox-search-account" name="26743">
<input type="hidden" value="" class="unibox-search-result-page" name="/fairrealty/listings/">
<input type="hidden" value="AUTO" class="unibox-search-listing-type" name="AUTO">
</div>I'm in over my head with this stuff - I'm looking to make noUiSlider (http://refreshless./nouislider/) work with the following form. I want to have a slider for the Minimum and Maximum price values in the form, where the slider moves up in increments of $10,000. Is this possible?
<script type="text/javascript" src="http://idx.myrealpage./js/weblets/omnibox_wp.js"></script>
<div class="unibox-search unibox-search-regular">
<div class="unibox-label">
Enter city, area, postal code or MLS(r) number:
</div>
<div class="unibox-text-field">
<input type="text" onkeydown="uniboxKeyDown(event,this)" onkeyup="uniboxKeyUp(event,this)" placeholder="Enter city, area, postal code or MLS(r) number" class="unibox-field">
<button onclick="return uniboxSubmitted(this)" name="unibox-run" class="unibox-submit">Search</button>
</div>
<div class="unibox-controls">
<select onchange="runUniboxHits(this)" name="unibox-bedrooms" class="unibox-bedrooms">
<option value="">--- Bedrooms ---</option>
<option value="1">Min. 1 bedroom</option>
<option value="2">Min. 2 bedrooms</option>
<option value="3">Min. 3 bedrooms</option>
<option value="4">Min. 4 bedrooms</option>
<option value="5">Min. 5 bedrooms</option>
</select>
<select onchange="runUniboxHits(this)" name="unibox-bathrooms" class="unibox-bathrooms">
<option value="">--- Bathrooms ---</option>
<option value="2.0">Min. 2 bathrooms</option>
<option value="3.0">Min. 3 bathrooms</option>
<option value="4.0">Min. 4 bathrooms</option>
<option value="5.0">Min. 5 bathrooms</option>
</select>
</div>
<input type="text" class="unibox-price-min" placeholder="Min Price" onfocus="uniboxResetHint('Min Price',false,this);" onblur="uniboxResetHint('Min Price',true,this);" value="Min Price" onkeyup="uniboxKeyUp(event,this)" onkeydown="uniboxKeyDown(event,this)">
<input type="text" class="unibox-price-max" placeholder="Max Price" onfocus="uniboxResetHint('Max Price',false,this);" onblur="uniboxResetHint('Max Price',true,this);" value="Max Price" onkeyup="uniboxKeyUp(event,this)" onkeydown="uniboxKeyDown(event,this)">
</div>
<div class="unibox-quick-summary-line">
<span class="unibox-quick-summary"></span><span> </span>
</div>
<input type="hidden" value="recip" class="unibox-search-context" name="recip">
<input type="hidden" value="1" class="unibox-search-region" name="34">
<input type="hidden" value="29619" class="unibox-search-account" name="26743">
<input type="hidden" value="http://firsthomeplan.ca/propertylistings" class="unibox-search-result-page" name="/fairrealty/listings/">
<input type="hidden" value="AUTO" class="unibox-search-listing-type" name="AUTO">
</div>1 Answer
Reset to default 7
jQuery(document).ready(function() {
$("#slider").noUiSlider({
start: [0, 1000000],
step: 10000,
connect: true,
range: {
'min': 0,
'max': 1000000
}
});
$("#slider").on('slide', function(event, values) {
$("input.unibox-price-min").val(values[0]);
$("input.unibox-price-max").val(values[1]);
});
});#slider {
margin: 20px;
width: 70%;
}<link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/noUiSlider/6.2.0/jquery.nouislider.min.css">
<script src="https://cdnjs.cloudflare./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- <script src="https://raw.githubusercontent./leongersen/libLink/master/jquery.liblink.js"></script> -->
<script src="https://cdnjs.cloudflare./ajax/libs/noUiSlider/6.2.0/jquery.nouislider.min.js"></script>
<script type="text/javascript" src="http://idx.myrealpage./js/weblets/omnibox_wp.js"></script>
<div class="unibox-search unibox-search-regular">
<div class="unibox-label">
Enter city, area, postal code or MLS(r) number:
</div>
<div class="unibox-text-field">
<input type="text" onkeydown="uniboxKeyDown(event,this)" onkeyup="uniboxKeyUp(event,this)" placeholder="Enter city, area, postal code or MLS(r) number" class="unibox-field">
<button onclick="return uniboxSubmitted(this)" name="unibox-run" class="unibox-submit">Search</button>
</div>
<div class="unibox-controls">
<select onchange="runUniboxHits(this)" name="unibox-bedrooms" class="unibox-bedrooms">
<option value="">--- Bedrooms ---</option>
<option value="1">Min. 1 bedroom</option>
<option value="2">Min. 2 bedrooms</option>
<option value="3">Min. 3 bedrooms</option>
<option value="4">Min. 4 bedrooms</option>
<option value="5">Min. 5 bedrooms</option>
</select>
<select onchange="runUniboxHits(this)" name="unibox-bathrooms" class="unibox-bathrooms">
<option value="">--- Bathrooms ---</option>
<option value="2.0">Min. 2 bathrooms</option>
<option value="3.0">Min. 3 bathrooms</option>
<option value="4.0">Min. 4 bathrooms</option>
<option value="5.0">Min. 5 bathrooms</option>
</select>
</div>
<input type="text" class="unibox-price-min" placeholder="Min Price" onfocus="uniboxResetHint('Min Price',false,this);" onblur="uniboxResetHint('Min Price',true,this);" value="Min Price" onkeyup="uniboxKeyUp(event,this)" onkeydown="uniboxKeyDown(event,this)"
/>
<input type="text" class="unibox-price-max" placeholder="Max Price" onfocus="uniboxResetHint('Max Price',false,this);" onblur="uniboxResetHint('Max Price',true,this);" value="Max Price" onkeyup="uniboxKeyUp(event,this)" onkeydown="uniboxKeyDown(event,this)"
/>
<div id="slider"></div>
</div>
<div class="unibox-quick-summary-line">
<span class="unibox-quick-summary"></span><span> </span>
</div>
<input type="hidden" value="recip" class="unibox-search-context" name="recip">
<input type="hidden" value="1" class="unibox-search-region" name="34">
<input type="hidden" value="29619" class="unibox-search-account" name="26743">
<input type="hidden" value="http://firsthomeplan.ca/propertylistings" class="unibox-search-result-page" name="/fairrealty/listings/">
<input type="hidden" value="AUTO" class="unibox-search-listing-type" name="AUTO">
</div>本文标签： javascriptUse noUiSlider with this formStack Overflow
版权声明：本文标题：javascript - Use noUiSlider with this form - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744787695a2625100.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论