Sliding Segments Ionic v2

slidespage.html

<ion-toolbar>
  <ion-segment [(ngModel)]="selectedSegment" (ionChange)="onSegmentChanged($event)">
    <ion-segment-button value="first">
      First
    </ion-segment-button>
    <ion-segment-button value="second">
      Second
    </ion-segment-button>
    <ion-segment-button value="third">
      Third
    </ion-segment-button>
  </ion-segment>
</ion-toolbar>

<ion-content padding>

  <ion-slides #mySlider (ionDidChange)="onSlideChanged($event)">
    <ion-slide *ngFor="let slide of slides">
      <h1>{{ slide.title }}</h1>
    </ion-slide>
  </ion-slides>

</ion-content>

<style>
  ion-scroll {
    width: 100%;
    height: 100%;
  }
</style>

slidespage.ts

import { Component, ViewChild } from '@angular/core';
import { NavController, Slides } from 'ionic-angular';

@Component({
  selector: 'page-slidespage',
  templateUrl: 'slidespage.html'
})
export class SlidesPage {
  @ViewChild('mySlider') slider: Slides;
  selectedSegment: string;
  slides: any;

  constructor(public navCtrl: NavController) {
    this.selectedSegment = 'first';
    this.slides = [
      {
        id: "first",
        title: "First Slide"
      },
      {
        id: "second",
        title: "Second Slide"
      },
      {
        id: "third",
        title: "Third Slide"
      }
    ];
  }

  onSegmentChanged(segmentButton) {
    console.log("Segment changed to", segmentButton.value);
    const selectedIndex = this.slides.findIndex((slide) => {
      return slide.id === segmentButton.value;
    });
    this.slider.slideTo(selectedIndex);
  }

  onSlideChanged(slider) {
    console.log('Slide changed');
    const currentSlide = this.slides[slider.activeIndex];
    this.selectedSegment = currentSlide.id;
  }

}