нировалstencil-component-starter из:

https://github.com/ionic-team/stencil-component-starter

Затем в файле:my-component.tsx У меня есть следующий код:

import { Component, Prop } from '@stencil/core';

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  shadow: true
})
export class MyComponent {

  @Prop() first: string;
  @Prop() last: string;
  @Prop() minHeartRate: number;
  @Prop() maxHeartRate: number;

  render() {
    return (
      <div>
        Athlete: {this.first} {this.last} - Heart Rate Range:
        <ion-range mode="ios" dualKnobs={true} min={0} max={200} step={2} pin={true} snaps={true} value={{lower: this.minHeartRate, upper: this.maxHeartRate}}>
          <ion-label range-left>0</ion-label>
          <ion-label range-right>200</ion-label>
        </ion-range>
      </div>
    );
  }
}

как вы можете видеть здесь:

https://github.com/napolev/stencil-ion-range/blob/master/src/components/my-component/my-component.tsx

[До] Это оказывалось оказаннымпочти правильно с двумя проблемами1 and 2:
[В настоящее время] Это не делается вообще. Итак, есть три вопроса1, 2 and 3:

<ion-label/> теги игнорируются.

Каждая ручка может выходить за пределы другой ручки (пожалуйста, не обращайте на это внимания, я думаю, это специально сделано в новой версии).

Это новая проблема, которую я только что обнаружил(Current time: 2018-08-26 19:20), Как и 12 часов назад (проверьте отметку времени в репо), хранилище:https://github.com/napolev/stencil-ion-range/ на коммит12c14b75cca92f19af6c5ccae60091319578cec7 генерировалпочти правильно<ion-range/> отметьте выше, кроме вопросов 1 и 2 (проверьте изображение ниже). Но теперь, после чистой установки этого репозитория, он больше не отображает то, что вы видите на изображении ниже. Это странно После выполнения этого коммита я проверил, что после чистой установки он рендерит это.

Вот то, что он рендерил раньше, что он больше не рендерится:

Ссылка:

https://ionicframework.com/docs/api/components/range/Range/

Есть идеи, как решить эту проблему?

Спасибо!

[РЕДАКТИРОВАТЬ 1]

Это ответ на комментарий Аарона Сондерса ниже:

компонент ионной метки внутри шаблона трафарета-компонента-стартера не отображается

Аарон, я добавил предложенный вами код, как вы можете видеть здесь:

https://github.com/napolev/stencil-ion-range/commit/d3471825131d3d329901c73d8c6803a609b27c3b#diff-34c2a6c626ee2612cd4f12b2c004a0b1L16

но при запуске кода с:$ npm start следующее то, что получено:

Вы правильно сделали компонент?

Я удалилnode_modules каталог и установить их снова безуспешно.

не могли бы вы попробовать мой репозиторий?

как вы можете видеть, я сделал всего 2 коммита поверх официальных коммитов:

https://github.com/napolev/stencil-ion-range/commits/master

На всякий случай вот версии, которые я использую для основных инструментов:

$ node -v
v8.11.2

$ npm -v
6.1.0

$ ionic -v
ionic CLI 4.1.1

[РЕДАКТИРОВАТЬ 2]

Существует параллельное обсуждение этой темы:

https://forum.ionicframework.com/t/ion-label-component-inside-the-stencil-component-starter-not-getting-rendered/139763

[РЕДАКТИРОВАТЬ 3]

Это ответ на комментарий отАлександр Старосельский ниже:

компонент ионной метки внутри шаблона трафарета-компонента-стартера не отображается

Александр, я попробовал ваше предложение со следующими изменениями:

https://github.com/napolev/stencil-ion-range/commit/68fce2abe25536b657f9493beb1cc56e26828e4f

Теперь<ion-range/> компонент рендерится (это действительно хорошо), но есть некоторая проблема при рендеринге, как вы можете видеть на следующем изображении.<ion-label/> компоненты имеют большую ширину.

Есть идеи о том, как это решить?

Спасибо!

[РЕДАКТИРОВАТЬ 4]

Добавление предложения отАарон Сондерс делает трюк:

<ion-item>
    <ion-range
        mode="ios"
        dualKnobs={true}
        min={0} max={200} step={2}
        pin={true} snaps={true}
        value={{ lower: this.minHeartRate, upper: this.maxHeartRate }}
    >
        <ion-label slot="start" style={{flex: 'none', margin: '0 30px 0 0'}}>0</ion-label>
        <ion-label slot="end" style={{flex: 'none', padding:' 0 0 0 30px'}}>200</ion-label>
    </ion-range>
</ion-item>

БлагодаряАлександр Старосельский а такжеАарон Сондерс потому что, комбинируя их предложения, я мог получить эту работу.