How to put the stored values from local-storage back to range slider?
Here are two slider fiddle examples:
I'm using local-storage to store the last max and min values of each range slider in the
stop: function (event, ui). Each slider has their own key as shown in the Console. But I have trouble retrieving the values and putting them back to the sliders. They are showing `[object Object] - [object Object] ` instead of the stored values. Can anyone show me how to get it to work?
HTML:
- <h4>Width</h4>
- <div data-max="100" data-min="0" class="slider"></div>
- <input type="text" class="center amount">
- <h4>Diameter</h4>
- <div data-max="50" data-min="0" class="slider"></div>
- <input type="text" class="center amount">
- <h4>Thickness</h4>
- <div data-max="20" data-min="0" class="slider"></div>
- <input type="text" class="center amount">
jQuery:
- $( ".slider" ).each(function(){
- var datamax = $(this).data('max'),
- datamin = $(this).data('min'),
- amount = $(this).next('.amount'),
- $key = $(this).prev('h4').text();
-
- $(this).slider({
-
- range: true,
-
- min: 0,
-
- max: datamax,
-
- values: [ datamin, datamax ],
-
- slide: function( event, ui ) {
-
- amount.val( ui.values[ 0 ] + " - " + ui.values[ 1 ] +" mm");
-
- },
- stop: function (event, ui) {
- localStorage[$key] = ui.value+ "," + ui.values[ 1 ];
-
- }
-
- });
-
- if ($key in localStorage)
- {
- var sliderValue = localStorage[$key];
- console.log(sliderValue);
- amount.val($( this ).slider( sliderValue, 0 ) +" - " + $( this ).slider( sliderValue, 1 ) +" mm");
- }
- else
- {
- amount.val($( this ).slider( "values", 0 ) +" - " + $( this ).slider( "values", 1 ) +" mm");
- }
- });