Setting cookies on 2 jQuery range sliders - jquery-ui

Question

I have two range sliders filtering a list of rental properties by rent and number of bedrooms. I'm trying to set cookies on them so the selected values and handle positions are remembered when the user comes back to this page via a "back to rentals" link. But every solution I've tried either does nothing or breaks the existing functionality of the sliders. I'm new to jQuery, can someone please give me a hand?
Thanks for your help. Here's the code for the two sliders:
<form id="formBeds">
<label for="amountBeds"># of Beds:</label>
<input type="text" id="amountBeds" style="border:0; color:#f6931f; font-weight:bold;" />
</form>
<div class="slider" id="beds"></div>
<form id="formPrice">
<label for="amountPrice">Rent:</label>
<input type="text" id="amountPrice" style="border:0; color:#f6931f; font-weight:bold;" />
</form>
<div class="slider" id="price"></div>
<script>
function showProducts(minPrice, maxPrice, minBeds, maxBeds) {
$("#bedrooms li").filter(function() {
var price = parseInt($(this).data("price"), 10);
var beds = parseInt($(this).data("beds"), 10);
if(price >= minPrice && price <= maxPrice && beds >= minBeds && beds <= maxBeds){
$(this).show();
} else {
$(this).hide();
}
});
}
$(function() {
var options = {
range: true,
min: 0,
max: 800,
values: [ 0, 800 ],
change: function(event, ui) {
var minPrice = $("#price").slider("values", 0);
var maxPrice = $("#price").slider("values", 1);
var minBeds = $("#beds").slider("values", 0);
var maxBeds = $("#beds").slider("values", 1);
$("#amountPrice").val("$" + minPrice + " - $" + maxPrice);
$("#amountBeds").val(minBeds + " - " + maxBeds);
showProducts(minPrice, maxPrice, minBeds, maxBeds);
}
};
var bounds = $("#slider").slider(options, "bounds");
$("#price").slider(options, "bounds", {min: 300, max: 800});
$("#beds").slider(options, "bounds", {min: 1, max: 4});
});
</script>