function drawDateSlider(selection){

        var ul = selection
            .selectAll('.layer-list-date-slider')
            .data([0]);

        ul.exit()
            .remove();

        ul = ul.enter()
            .append('ul')
            .attr('class', 'layer-list layer-list-date-slider')
            .merge(ul);

        var li = ul.selectAll('.list-item-date-slider')
            .data(context.photos().shouldFilterDateBySlider() ? ['date-slider'] : []);

        li.exit()
            .remove();

        var liEnter = li.enter()
            .append('li')
            .attr('class', 'list-item-date-slider');

        var labelEnter = liEnter
        .append('label')
        .each(function() {
            d3_select(this)
                .call(uiTooltip()
                    .title(() => t.append('photo_overlays.age_slider_filter.tooltip'))
                    .placement('top')
                );
        });

        labelEnter
            .append('span')
            .attr('class', 'dateSliderSpan')
            .call(t.append('photo_overlays.age_slider_filter.title'));

        let sliderWrap = labelEnter
            .append('div')
            .attr('class','slider-wrap');

        sliderWrap
            .append('input')
            .attr('type', 'range')
            .attr('min', 0)
            .attr('max', 1)
            .attr('step', 0.001)
            .attr('list', 'photo-overlay-data-range')
            .attr('value', () => dateSliderValue('from'))
            .classed('list-option-date-slider', true)
            .classed('from-date', true)
            .style('direction', localizer.textDirection() === 'rtl' ? 'ltr' : 'rtl')
            .call(utilNoAuto)
            .on('change', function() {
                let value = d3_select(this).property('value');
                setYearFilter(value, true, 'from');
            });
        selection.select('input.from-date').each(function() { this.value = dateSliderValue('from'); });

        sliderWrap.append('div')
            .attr('class', 'date-slider-label');

        sliderWrap
            .append('input')
            .attr('type', 'range')
            .attr('min', 0)
            .attr('max', 1)
            .attr('step', 0.001)
            .attr('list', 'photo-overlay-data-range-inverted')
            .attr('value', () => 1 - dateSliderValue('to'))
            .classed('list-option-date-slider', true)
            .classed('to-date', true)
            .style('display', () => dateSliderValue('to') === 0 ? 'none' : null)
            .style('direction', localizer.textDirection())
            .call(utilNoAuto)
            .on('change', function() {
                let value = d3_select(this).property('value');
                setYearFilter(1-value, true, 'to');
            });
        selection.select('input.to-date').each(function() { this.value = 1 - dateSliderValue('to'); });

        selection.select('.date-slider-label')
            .call(dateSliderValue('from') === 1
                ? t.addOrUpdate('photo_overlays.age_slider_filter.label_all')
                : t.addOrUpdate('photo_overlays.age_slider_filter.label_date', {
                    date: new Date(now - Math.pow(dateSliderValue('from'), 1.45) * 10 * 365.25 * 86400 * 1000).toLocaleDateString(localizer.localeCode()) }));

        sliderWrap.append('datalist')
            .attr('class', 'date-slider-values')
            .attr('id', 'photo-overlay-data-range');
        sliderWrap.append('datalist')
            .attr('class', 'date-slider-values')
            .attr('id', 'photo-overlay-data-range-inverted');

        const dateTicks = new Set();
        for (const dates of Object.values(photoDates)) {
            dates.forEach(date => {
                dateTicks.add(Math.round(1000 * Math.pow((now - date) / (10 * 365.25 * 86400 * 1000), 1/1.45)) / 1000);
            });
        }
        const ticks = selection.select('datalist#photo-overlay-data-range').selectAll('option')
            .data([...dateTicks].concat([1, 0]));
        ticks.exit()
            .remove();
        ticks.enter()
            .append('option')
            .merge(ticks)
            .attr('value', d => d);
        const ticksInverted = selection.select('datalist#photo-overlay-data-range-inverted').selectAll('option')
            .data([...dateTicks].concat([1, 0]));
            ticksInverted.exit()
            .remove();
        ticksInverted.enter()
            .append('option')
            .merge(ticksInverted)
            .attr('value', d => 1 - d);


        li
            .merge(liEnter)
            .classed('active', filterEnabled);

        function filterEnabled() {
            return !!context.photos().fromDate();
        }
    }
Draws the date slider filter in the right panel