Как можно настроить плагин ion.rangeSlider так, чтобы символ отображался только в определенных элементах? 

Как можно убрать символ € со шкалы, оставив его в остальных местах, таких как на ползунке и в начальных и конечных значениях сверху? <br/> <pre><code class="html">&lt;div class="range-slider-price"&gt;
         &lt;input type="text" class="js-range-slider-price" value="" /&gt;
&lt;/div&gt;
&lt;/div&gt;</code></pre> <br/> <pre><code class="css">.irs--round .irs-handle {
    border: 4px solid #D81E05;
}

.irs--round .irs-bar {
    top: 36px;
    height: 4px;
    border-radius: 4px 0px 0px 4px;
    background: linear-gradient(90deg, #D81E05 0%, #C91C04 33.33%, #C91C04 66.67%, #D81E05 100%);
}

.irs--round .irs-single {
    background-color: #D81E05;
}

.irs--round .irs-single:before {
    position: absolute;
    display: block;
    content: "";
    bottom: -7px;
    left: 50%;
    width: 6px;
    height: 7px;
    margin-left: -3px;
    overflow: hidden;
    border: 3px solid transparent;
    background-color: #D81E05;
}</code></pre> <br/> <br/> <pre><code class="javascript">export function rangeSliderPrice() {
    var $range = $(".js-range-slider-price");
    var $result = $(".js-result-price");

    var values = [1, 3, 6, 9, 12];
    var values_p = ["1 month", "3 month", "6 month", "9 month", "12 month"];

    $range.ionRangeSlider({
        skin: "round",
        type: "single",
        grid: true,
        values: values,
        prettify: function (n) {
            var ind = values.indexOf(n);
            return values_p[ind];
        },
        onStart: function(data) {
            $result.text(values_p[values.indexOf(data.from_value)]);
        },
        onChange: function(data) {
            $result.text(values_p[values.indexOf(data.from_value)]);
        }
    });
}</code></pre> <br/>
  • 26 сентября 2024 г. 16:43
Ответы на вопрос 1 
Чтобы настроить плагин `ion.rangeSlider` так, чтобы символ `€` отображался только в определенных элементах (например, на ползунке и в начальных и конечных значениях), а не на шкале, вы можете использовать функцию `prettify` для форматирования значений, которые будут отображаться.

Вот как можно изменить ваш JavaScript-код, чтобы достичь этого:

```javascript
export function rangeSliderPrice() {
    var $range = $(".js-range-slider-price");
    var $result = $(".js-result-price");

    var values = [1, 3, 6, 9, 12];
    var values_p = ["1 month", "3 month", "6 month", "9 month", "12 month"];

    $range.ionRangeSlider({
        skin: "round",
        type: "single",
        grid: true,
        values: values,
        prettify: function (n) {
            var ind = values.indexOf(n);
            // Символ € добавляется только для ползунка
            return values_p[ind] + " €";
        },
        onStart: function(data) {
            $result.text(values_p[values.indexOf(data.from_value)] + " €");
        },
        onChange: function(data) {
            $result.text(values_p[values.indexOf(data.from_value)] + " €");
        }
    });
}
```

### Объяснение изменениях:

1. **Функция `prettify`**:
   - Теперь функция `prettify` добавляет символ `€` только в конечный текст для значений, которые отображаются на ползунке. Это сделано путем добавления ` + " €"` к возвращаемому значению.

2. **Места отображения**:
   - При обновлении текста в `$result` (при событиях `onStart` и `onChange`) также добавляется символ `€`.

### Примечание:
- Шкала не будет отображать символ `€`. Она будет показывать только числовые значения, так как мы не изменяем контент для шкалы (по умолчанию `ion.rangeSlider` формирует шкалу без привязки к форматированию, установленному в `prettify`).
- Убедитесь, что в CSS также прописаны необходимые стили для отображения этого текста аккуратно, особенно если вы правили отображение других элементов.

С такими изменениями вы достигнете желаемого поведения, и символ `€` будет отображаться только в нужных местах.
Похожие вопросы
    Показать ещё