                 <div className="collection-question-mark-outer">
                   <div className="collection-question-mark-inner">?</div>
                 </div>
+
+                <div className="min-max-dates-container">
+                  <div className="min-date min-max-date">{@state.min_year}</div>
+                  <div className="max-date min-max-date">{@state.max_year}</div>
+                </div>
+
                 <div className="collection-range-slider">
-                  <ReactSlider defaultValue={[0, 100]} withBars />
+
+                  <ReactSlider min={@state.min_year} 
+                      max={@state.max_year} 
+                      defaultValue={[@state.min_year, @state.max_year]} withBars />
 
                 </div>
                 

      first_pages_view.push <FirstPageThumbnail page_json={page_json} key={index} />
    @setState
      first_page_array: first_pages_view
      first_pages_initialized: 1


  updateFirstPageArray: ->

        if playwright
          if playwright not in all_playwrights
            all_playwrights.push(playwright)

        if year
          year_int = parseInt(year)
          if year_int < min_year
            min_year = year_int
          if year_int > max_year
            max_year = year_int

      min_max_year_array = [min_year, max_year]
      console.log(min_max_year_array)

      @setState
        all_first_pages: first_pages_json
        all_institutions: all_institutions
        all_playwrights: all_playwrights
        min_year: min_year
        max_year: max_year

      @initializeFirstPageArray()

