I am need to create DateSlider for whole Sentinel-NDVI collection during given period. Is there any way to do so? https://developers.google.com/earth-engine/ui_widgets, here I found an example, but I was not able adjust it to my case.

var Start_period = ee.Date('2020-01-01');
var End_period = ee.Date(now);

var sentinel_dataset = ee.ImageCollection("COPERNICUS/S2_SR")
    .filterDate(Start_period, End_period)
    .filter(ee.Filter.lt('CLOUDY_PIXEL_PERCENTAGE', 20))

var collection = sentinel_dataset.map(function(image) {
  return image.select().addBands(image.normalizedDifference(['B8', 'B4'])).rename('NDVI');


var vis = {min: 0, max: 1, palette: [
  'FFFFFF', 'CE7E45', 'FCD163', '66A000', '207401',
  '056201', '004C00', '023B01', '012E01', '011301'

1 Answer 1


UI widgets needs client-side arguments. In this case, you can call evaluate() on your dates to get their client-side values. I'm putting them together into a dictionary to be able to have a single object to call evaluate() on, to simplify things.

ee.Dictionary({start: Start_period, end: End_period})

function renderSlider(dates) {
  var slider = ui.DateSlider({
    start: dates.start.value, 
    end: dates.end.value, 
    period: 5, // Every 5 days
    onChange: renderDateRange

function renderDateRange(dateRange) {
  var image = collection
    .filterDate(dateRange.start(), dateRange.end())

  var vis = {min: 0, max: 1, palette: [
    'FFFFFF', 'CE7E45', 'FCD163', '66A000', '207401',
    '056201', '004C00', '023B01', '012E01', '011301'
  var layer = ui.Map.Layer(image, vis, 'NDVI')


  • #Daniel, thanks for the answer. How to filter and visualize only the dates when the Sentinel images were available for particular area? Commented Mar 6, 2020 at 16:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.