functionning range

app.py

@@ -21,7 +21,8 @@ def result50(date=datetime.now()):
 @app.route("/")
 @app.route('/top50async/<date>/')
 def top50async(date="2020-01-12"):
-    return render_template('async_list.html', date=date)
+    delta = datetime.now() - datetime(2014,1,1)
+    return render_template('async_list.html', date=date, rangeDate=delta.days )
 
 @app.route('/top50json/<date>/')
 def top50json(date):

static/js/app.js

@@ -1,9 +1,12 @@
 
+const MIN_DATE = dayjs("2012-01-01")
+
 const coinTop50 = {
     data() {
       return {
         date :document.getElementById("startDate").innerText,
         items: [],
+        rangeDate:document.getElementById("startDate").getAttribute("max"),
         datepicker:null
       }
     },
@@ -17,6 +20,9 @@ const coinTop50 = {
     watch:{
       date(newDate,oldDate){
         this.requestData(newDate)
+      },
+      rangeDate(newValue){
+        this.date = MIN_DATE.add(newValue,"d").format("YYYY-MM-DD");
       }
     },
     methods:{

templates/async_list.html

@@ -51,7 +51,7 @@
           <p class="range-field">
             <label for="date">Select Date</label>
             <input type="text"  id="date" v-model="date" class="datepicker">
-            <input type="range" min="1970-01-01" max="2021-03-14" />
+            <input type="range" min="0" max="{{rangeDate}}" v-model="rangeDate" />
           </p>
         </form>
         <h4>Top 50 Cryptocurrency by market cap </h4>
@@ -71,6 +71,7 @@
     <!--JavaScript at end of body for optimized loading-->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
     <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+    <script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script>
     <script src="https://unpkg.com/vue@next"></script>
     <script src="{{ url_for('static', filename='js/app.js')}}"></script>
   </body>