如何在ionic 5中自定义离子范围？

如何解决如何在ionic 5中自定义离子范围？

我正在寻找有关如何根据线框自定义 ion-range 的当前问题的解决方案。正如您在下面看到的线框与我制作的实际作品之间的差异。

线框设​​计

我的实际工作

在上面，您可以看到两者之间的区别。我的问题是，是否有任何方法或解决方案可以让我获得线框的实际外观。基于线框，当用户移动刻度线时，与刻度线对齐的标签也应为蓝色。

这些是我使用并产生了我的实际工作的代码。

.html

   <div class="slidecontainer">
    <ion-range 
        class="range-position"
        min="5" 
        max="100" 
        dualknobs="true"
        pin="false"
        snaps="true"
        ticks="false"
        value="0" 
        snaps color="primary"
        list='tickmarks'>
    </ion-range>

    <div id="tickmarks" class="tick-position">
        <p>5</p>
        <p>10</p>
        <p>25</p>
        <p>50</p>
        <p>75</p>
        <p>100</p>
    </div>
</div>

.scss

// Customize Slider
   #tickmarks {
   display: flex;
   justify-content: space-between;
   padding: 0 25px;
   }

   #tickmarks p {
    position: relative;
    display: flex;
    justify-content: center;
    text-align: center;
    width: 1px;
    background: #ccd3da;
    height: 10px;
    line-height: 40px;
    margin: 0 0 20px 0;
    font-family: 'Archivo';
    font-size: 12px;
   }

希望您能提供帮助，以便我能够继续我的任务。非常感谢

解决方法

您可以使用 (ionChange) 事件使其工作。

 <ion-range 
    class="range-position"
    min="5" 
    max="100" 
    dualknobs="true"
    pin="false"
    snaps="true"
    ticks="false"
    value="0"
    step="25"  // use step attribute for sure event value
    snaps color="primary"
    list='tickmarks'
    (ionChange)="changeFunction($event)">
</ion-range>
<div id="tickmarks" class="tick-position">
    <p [ngClass]="selectedValue == 0 ? 'active' : null">5</p>
    <p [ngClass]="selectedValue == 25 ? 'active' : null">25</p>
    <p [ngClass]="selectedValue == 50 ? 'active' : null">50</p>
    <p [ngClass]="selectedValue == 75 ? 'active' : null">75</p>
    <p [ngClass]="selectedValue == 100 ? 'active' : null">100</p>
</div>

.ts

selectedValue;

changeFunction($event){
   this.selectedValue =  $event.detail.value;
}

,

您可以让 ion-range 组件下方的刻度线对范围内的选定值做出反应，如下所示。

向 ionChange 添加一个监听 <ion-change> 事件的函数。在组件类中使用该函数来更新值。然后，您可以在模板中使用该值来指示应突出显示哪个刻度（获取 selected CSS 类）。

range.component.html - 单量程（一个旋钮）

<div class="range-container">
  <ion-range
    (ionChange)="setValue($event)"        
    [value]="currentValue" 
    color="primary"
    dual-knobs="false"
    max="100"
    min="0"
    pin="false"
    snaps="true"
    step="25"
    ticks="false"
    
  >
  </ion-range>
  <ul class="tick-marks">
    <li 
      *ngFor="let number of [0,25,50,75,100]"
      [class.selected]="number === currentValue"
    >
      {{number}}
    </li>
  </ul>
</div>

range.component.html - 双旋钮

<div class="range-container">
  <ion-range
    (ionChange)="setDualValues($event)"
    [value]="currentDualValues" 
    color="primary"
    dual-knobs="true"
    max="100"
    min="0"
    pin="false"
    snaps="true"
    step="25"
    ticks="false"
  >
  </ion-range>
  <ul class="tick-marks">
    <li 
      *ngFor="let number of [0,100]"
      [class.selected]="number === currentDualValues.lower || number === currentDualValues.upper"
    >
      {{number}}
    </li>
  </ul>
</div>

range.component.ts- 组件文件

@Component({
  selector: 'app-range',styleUrls: ['./range.component.scss']
  templateUrl: './range.component.html'
})
export class RangeComponent {
  currentValue = 0;
  currentDualValues = {
    lower: 25,upper: 50
  };
  
  // use this for single slider
  setValue($event: Event): void {
    this.currentValue = parseInt(($event.target as HTMLInputElement).value,10);
  }
  
  // use this for dual sliders (dual knobs)
  setDualValues($event: Event): void {
    this.currentDualValues = JSON.parse(JSON.stringify(($event.target as HTMLInputElement).value));
  }
}

最后，在您的 CSS 中添加 .selected 类以根据需要设置所选数字的样式，例如像这样（您可能需要更改 ul.tick-marks 的填充以确保刻度线正确对齐使用范围选择器）：

range.component.scss

.range-container {
  display: flex;
  flex-direction: column;
  width: 100%;

  .tick-marks {
    display: flex;
    justify-content: space-between;
    list-style: none;
    margin: 0;
    padding: 0;

    li {
      color: var(--ion-color-dark);
      position: relative;

      &::before {
        background-color: var(--ion-color-dark);
        content: '';
        display: block;
        height: 20px;
        left: 50%;
        position: absolute;
        width: 1px;
        top: -20px;
      }

      &.selected {
        color: var(--ion-color-primary);

        &::before {
          background-color: var(--ion-color-primary); 
        }
      }
    }
  }
}

另请参阅此 stackblitz 以供参考。