         all_playwrights: all_playwrights
         min_year: min_year
         max_year: max_year
+        start_year: min_year
+        end_year: max_year
 
       @initializeFirstPageArray()
 

    @setState
      first_page_array: first_pages_view

  updateFirstPageArray: ->
    selected_institution = $(".collection-institution select").val()
    selected_playwright  = $(".collection-playwright select").val() 
    start_and_end_years  = @refs.ReactYearSlider.state.value

    # define the selection criteria to be used to filter first page objects
    selection_criteria_options = [

                </div>

                <div className="collection-range-slider">
                  <ReactSlider 
                    onAfterChange={@updateYearSliderState}
                    ref="ReactYearSlider"
                    min={@state.min_year} 
                    max={@state.max_year} 
                    value={[@state.start_year, @state.end_year]} withBars />
                </div>
                
                <div className="custom-select collection-institution">
