How to implement the effect of switching images by sliding the Slider

Read the original article：How to implement the effect of switching images by sliding the Slider

How to implement the effect of switching images by sliding the Slider

Context

This guide explains how to implement image switching functionality using the Slider component, where images are displayed on the left side and change as the slider is moved.

Description

How to display images on the left side of a Slider component and switch images accordingly when sliding.

The Slider component is typically used for quickly adjusting setting values, such as volume or brightness control.
- onChange: Event callback triggered when the Slider is dragged or clicked.
- blockStyle: Sets the slider block shape parameters.
overlay: Can set a floating layer for components.

Solution

To implement image switching with Slider, first bind images to the Slider, then listen for value changes through the onChange event. Steps are as follows:

Bind images to the Slider using overlay:

@Builder
OverlayNode() {
  Column() {
    Image($r(this.icon)) // Resources can be cited according to actual circumstances.
  }.width(40).height(40).alignItems(HorizontalAlign.Center).margin({ left: 10 })
};Copy codeCopy code
Slider({ style: SliderStyle.NONE, value: 20 })
  .overlay(this.OverlayNode(), { align: Alignment.Start })

Listen to the onChange event to switch different images based on the value:

.onChange(value => {
  if (value < 20) {
    this.icon = this.iconList[0];
  } else if (value >= 20 && value <= 30) {
    this.icon = this.iconList[1];
  } else if (value > 30 && value <= 40) {
    this.icon = this.iconList[2];
  } else if (value > 40 && value <= 50) {
    this.icon = this.iconList[3];
  } else if (value > 50 && value <= 60) {
    this.icon = this.iconList[4];
  } else if (value > 60 && value <= 70) {
    this.icon = this.iconList[5];
  } else {
    this.icon = this.iconList[6];
  };
});

Complete code:

// Start solution1
@Entry
@Component
struct SliderDemo {
  @State icon: string = 'sys.media.AI_phone';
  iconList: Array<string> = ['sys.media.AI_translate', 'sys.media.AI_circle_viewfinder', 'sys.media.AI_retouch',
    'sys.media.battery_bolt_fill', 'sys.media.AI_phone', 'sys.media.calendar_badge_play', 'sys.media.battery_bolt_fill'];
  // Start solution2
  @Builder
  OverlayNode() {
    Column() {
      Image($r(this.icon)) // Resources can be cited according to actual circumstances.
    }.width(40).height(40).alignItems(HorizontalAlign.Center).margin({ left: 10 })
  };
  // End solution2
  build() {
    Column() {
      // Start solution3
      Slider({ style: SliderStyle.NONE, value: 20 })
        .overlay(this.OverlayNode(), { align: Alignment.Start })
        // End solution3
        .trackThickness(60)
        .trackColor('#e0e0e0')
        .selectedColor(Color.White)
        .width('90%')
        .margin({ left: '5%', top: '40%' })
        .blockStyle({ type: SliderBlockType.IMAGE, image: $r(this.icon) }) // Resources can be cited according to actual circumstances.
        // Start solution4
        .onChange(value => {
          if (value < 20) {
            this.icon = this.iconList[0];
          } else if (value >= 20 && value <= 30) {
            this.icon = this.iconList[1];
          } else if (value > 30 && value <= 40) {
            this.icon = this.iconList[2];
          } else if (value > 40 && value <= 50) {
            this.icon = this.iconList[3];
          } else if (value > 50 && value <= 60) {
            this.icon = this.iconList[4];
          } else if (value > 60 && value <= 70) {
            this.icon = this.iconList[5];
          } else {
            this.icon = this.iconList[6];
          };
        });
      // End solution4
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#ffececec')
  }
}
// End solution1