在滑块问题中显示货币

Question

我正在使用滑块，它像这样工作正常：

{literal}
    <script>
        $( function() {
            $( "#slider-revenue-max" ).slider({
                range: "max",
                min: 0,
                max: 10000,
                step: 100,
                value: {/literal}{if $revenue == ''}0{else}{$revenue}{/if}{literal},
                slide: function( event, ui ) {
                    $( "#revenue" ).val ( ui.value);
                }
            });
            $( " #revenue" ).val("£" + $( "#slider-revenue-max" ).slider( "value" ) );
        } );
    </script>
{/literal}`

但是在移动滑块时，"£"没有显示，所以我这样做了：

{literal}
    <script>
        $( function() {
            $( "#slider-revenue-max" ).slider({
                range: "max",
                min: 0,
                max: 10000,
                step: 100,
                value: {/literal}{if $revenue == ''}0{else}{$revenue}{/if}{literal},
                slide: function( event, ui ) {
                    $( "#revenue" ).val ( "£" + ui.value);
                }
            });
            $( " #revenue" ).val("£" + $( "#slider-revenue-max" ).slider( "value" ) );
        } );
    </script>
{/literal}

当我使用它时，它

会显示"£"，但是当我应用过滤器时，它没有显示任何结果。

谢谢

Answer 1

您可以通过 css 使用 ：before 或 ：after 应用"£"，或者我如何使用 Leon 的 noUi 滑块从 refreshless.com 中做到这一点，如下所示。

.CSS：

.noUi-handle:after {
  content:attr(data-content);
  display: block;
  color: #FFF;
  font-size: 26px;
  font-weight: 700;
  font-family: 'Open Sans', sans-serif;
  text-align: center;
  line-height: 53px;
}

Javascript：

$(".noUi-handle").attr("data-content", "$" + display);

显示只是一个值，从

用户在滑块上的任何值中获取，即它会像 500 美元或其他东西。希望这有帮助。