0xD34F

Во-первых - замените имя свойства class, ключевые слова использовать нельзя (на самом деле можно, но как - я вам говорить не стану, сперва научитесь давать свойствам нормальные имена). Пусть будет className, например.

Во-вторых, :class="className". Ну и документацию почитайте.

numbers = [n for n in range(1000, 10000)]

или

numbers = list(range(1000, 10000))

возможно ли это вообще

Нет, невозможно. То, чего вы хотите - это нечто из ряда вон. Такого не то, что никто никогда раньше не делал - в голову никому не приходило. Вот и нет соответствующих инструментов.

А если серьёзно - используйте IN.

https://codepen.io/anon/pen/drPKJK?editors=1010

Пусть компонент через props получает список допустимых значений:

<Range steps={[ 500, 1000, 5000, 10000 ]} />

А по событию change ищите среди них ближайшее к установленному пользователем:

class Range extends React.Component {
  state = {
    value: this.props.steps[0],
  }

  onChange = ({ target: { value } }) => {
    this.setState({
      value: this.props.steps.reduce((closest, n) =>
        Math.abs(closest - value) < Math.abs(n - value) ? closest : n
      ),
    });
  }

  render() {
    const { steps } = this.props;

    return (
      <div>
        <input
          type="range"
          min={steps[0]}
          max={steps[steps.length - 1]}
          value={this.state.value}
          onChange={this.onChange}
        />
        <p>{this.state.value}</p>
      </div>
    );
  }
}

Похоже на то, что вам нужно?

options: {
  tooltips: {
    enabled: false,
  },
},

например

const classes = [
  { maxLen: 15, name: 'length-15' },
  { maxLen: 30, name: 'length-30' },
  { maxLen: 45, name: 'length-45' },
];

document.querySelectorAll('.container').forEach(n => {
  const len = n.textContent.length;
  const cls = classes.find(m => m.maxLen >= len);

  if (cls) {
    n.classList.add(cls.name);
  }
});

echo explode('-', (explode('/', $page)[3]))[2];

или

preg_match('~colors\-is\-(\w+)~', $page, $match);
echo $match[1];

list(map(lambda n: n['obj_id'], data))

.container
  .row.flex-wrap.bg-light.sticky-top.m-auto.dots
    - for (var x = 1; x <= 8; x++)
      .col-md-3      
        .dot
          img(src="" alt="" data-id=x)
          p text

$('.data-item').on('input', 'input', function() {
  $(this).closest('.data-item').find('.ui-slider').slider('value', $(this).val());
});

Параметр text - можно не только строки передавать. Например:

text={<a href="https://toster.ru">toster</a>}

Начал изучать MobX на этом ресурсе, встал вопрос.

Так вы изучайте дальше - ответ на ваш вопрос в восьмой части этого руководства.

arr.sort((a, b) => (a.finishedDate || a.createdDate) - (b.finishedDate || b.createdDate));

UPD. Вынесено из комментариев:

Добавляется еще один дополнительный параметр, такой как статус)
status: 'started' или status: 'finished'.
Как можно поставить элемент со статусом started в начало массива?

arr.sort((a, b) => {
  const aStatus = a.status !== 'started';
  const bStatus = b.status !== 'started';
  const aDate = a.finishedDate || a.createdDate;
  const bDate = b.finishedDate || b.createdDate;

  return (aStatus - bStatus) || (aDate - bDate);
});

UPD. Вынесено из комментариев:

Ругается на: aStatus - bStatus

The right-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.

Но если присвоить тип этим переменным эни, то работает супер-пупер

Не надо any, превращайте значения в числа явным образом:

const aStatus = +(a.status !== 'started');
const bStatus = +(b.status !== 'started');

Приноровился к angular 2+

Если это правда, то чтения официальной документации вам будет более чем достаточно. Понимание начнёт приходить вот прям сразу.

document.querySelector('input').addEventListener('input', e => {
  const
    val = e.target.value,
    reg = RegExp(val, 'gi'),
    keys = [ 'firstName', 'lastName' ];

  document.querySelector('.autocomplete-suggestions__list').innerHTML = val && people
    .map(n => keys.map(k => n[k]).join(' '))
    .filter(n => (reg.lastIndex = 0, reg.test(n)))
    .map(n => `<div>${n.replace(reg, '<strong>$&</strong>')}</div>`)
    .join('');
});

Где, кто и что:

const containerSelector = '.field';
const textSelector = `${containerSelector} .name`;
const text = 'some name 1';

Скрываем элемент, если текстовое содержимое точно совпадает с указанной строкой:

for (const n of document.querySelectorAll(textSelector)) {
  if (n.innerText === text) {
    n.closest(containerSelector).style.visibility = 'hidden';
  }
}

Или, скрываем в случае частичного совпадения без учёта регистра:

.hidden {
  visibility: hidden;
}

document.querySelectorAll(containerSelector).forEach(function(n) {
  n.classList.toggle('hidden', this(n.querySelector(textSelector).textContent));
}, RegExp.prototype.test.bind(RegExp(text, 'i')));

preg_replace("/[^\d]/", "", "+7(999) 111-53-66)")