Creating a range slider for dates

Question

I'm trying to create a range slider using HTML and CSS.

I want the range to be between two dates.

I looked up the code for a range slider and found this,

<form method="post" action="/action_page_post.php">
  <div data-role="rangeslider">
    <label for="price-min">Price:</label>
    <input type="range" name="price-min" id="price-min" value="200" min="0" max="1000">
    <label for="price-max">Price:</label>
    <input type="range" name="price-max" id="price-max" value="800" min="0" max="1000">
  </div>
    <input type="submit" data-inline="true" value="Submit">
    <p>The range slider can be useful for allowing users to select a specific price range when browsing products.</p>
  </form>

This is perfect in terms of what I want, but I want the minimum and maximum values to be dates. Lets say I want the slider to range from 2018-05-29 and 2018-06-25.

I'm not sure how to make this happen...

Answer 1

You can use this sample in CodePen provided by Rod Reyes. It's using jquery-ui plugin.

 $(function () {
            $("#slider-range").slider({
                range: true,
                min: new Date('2010.01.01').getTime() / 1000,
                max: new Date('2014.01.01').getTime() / 1000,
                step: 86400,
                values: [new Date('2013.01.01').getTime() / 1000, new Date('2013.02.01').getTime() / 1000],
                slide: function (event, ui) {
                    $("#amount").val((new Date(ui.values[0] * 1000).toDateString()) + " - " + (new Date(ui.values[1] * 1000)).toDateString());
                }
            });
            $("#amount").val((new Date($("#slider-range").slider("values", 0) * 1000).toDateString()) +
                " - " + (new Date($("#slider-range").slider("values", 1) * 1000)).toDateString());
        });

<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<p>
    <label for="amount">Date range:</label>
    <input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" size="100" />
</p>
<div id="slider-range"></div>

See it in action also here: https://codepen.io/2rod/pen/JtIki