小编jho*_*nes的帖子

我正在使用 Bootstrap 滑块插件来创建范围滑块

我想构建一个具有两个值的范围滑块，如下例所示：

我想要达到的结果：

HTML：

<form>
<div class="d-flex justify-content-between">
   <small><span id="minP">50</span> $</small>
   <small><span id="betP">100</span> $</small>
   <small>2000 $</small>
</div>

<input type="text" id="exampleRange"
    data-slider-min="50"
    data-slider-max="2000"
    data-slider-step="1"
    data-slider-value="[1,100]"
    data-slider-tooltip="hide" />
</form>

JavaScript：

var exSlider = new Slider('#exampleRange');
exSlider.on('slide', function(minPValue, betPValue) {
    document.getElementById('minP').textContent = minPValue;
    document.getElementById('betP').textContent = betPValue;
});

我正在使用 SASS 并在我的一些学术项目中将新版本 V5 作为 CSS 框架引导到颜色部分，因为颜色功能没有按预期工作，我将在下一行解释图像的问题在哪里。

首先看看当前的结果：

正如您在当前结果中看到的那样，它是一个警告组件，背景和边框颜色为橙色，但问题是文本应该是白色而不是黑色，但在此示例中是黑色我想在不使用任何自定义 css 的情况下动态更改颜色仅将引导程序颜色功能编辑为白色而不是黑色。

我所期望的：

codepen 上的实时示例

现场示例

我的完整代码：

$_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003 .0033 .0037 .004 .0044 .0048 .0052 .0056 .006 .0065 .007 .0075 .008 .0086 .0091 .0097 .0103 .011 .0116 .0123 .013 .0137 .0144 .0152 .016 .0168 .0176 .0185 .0194 .0203 .0212 .0222 .0232 .0242 .0252 .0262 .0273 .0284 .0296 .0307 .0319 .0331 .0343 .0356 .0369 .0382 .0395 .0409 .0423 .0437 .0452 .0467 .0482 …

我想知道如何将禁用提交按钮从jQuery转换为alpine js？

代码 ：

<form>
  <input type="text" class="input-field" placeholder="Enter you name *" value="" />
  <button type="submit" class="submit-btn">Submit</button>
</form>

$(document).ready(function(){
    $('.submit-btn').attr('disabled',true);
    $('.input-field').keyup(function(){
        if($(this).val().length !=0)
            $('.submit-btn').attr('disabled', false);            
        else
            $('.submit-btn').attr('disabled',true);
    })
});