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

您可以使用：before或：after css之前应用“£”，或者使用Leon {i}}来自refreshless.com的noUi滑块来执行此操作，如下所示。

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美元或者其他值。希望这会有所帮助。

在滑块问题中显示货币

1 个答案: