Ноль как символ бесконечности в html input

Question

Я пытаюсь показать символ бесконечности во входном значении вместо «0», пользователь может ввести или изменить входное значение с помощью компонента ползунка.

Я следовал предложениям, описанным в этой ссылке HTML как установить значение до бесконечности однако у меня это не сработало, и я не уверен, что делаю неправильно.

Код

render(){                
    return(
        <div>        
            <input type="text" pattern="([0-9]|&#8734;)+"
            name="slider-value" 
            value={this.state.currentValue != -1 ? this.props.showZeroAsInfinity && 
            this.state.currentValue == 0 ? "&#8734" : this.state.currentValue : 
            this.state.initialValue} 
            style={{fontSize: '0.8rem', fontFamily: 'Ubuntu', paddingTop: '5px', textAlign: 'center', 
            border: '0', flex: '1', minWidth: '0', display: 'block', margin:'0 auto'}}
            onChange={this.handleTypingChange}
            disabled={this.props.disabled != undefined ? this.props.disabled : false}/>                
        <Slider
            classes={{thumb:this.props.classes.thumb}}
            value={this.state.currentValue != -1 ? this.state.currentValue : this.state.initialValue}
            min={this.props.config.minSliderValue}
            max={this.props.config.maxSliderValue}
            step= {this.props.config.sliderStep}
            onChange={this.handleChange}
            disabled ={this.props.disabled != undefined ? this.props.disabled : false}
        />
        </div>
    )
}

Результат, который я получаю

Ожидаемый результат - символ бесконечности вместо ∞.