2

我正在寻找有关如何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;
   }

希望您能提供帮助，以便我可以继续完成我的任务。太感谢了

4

2 回答 2

2

您可以使用(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;
}
于 2021-02-18T14:50:36.993 回答
0

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

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

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, 25, 50, 75, 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以供参考。

于 2021-03-05T17:11:56.973 回答